关于css float为div1，div2的外观？

Question

This is the html code.

<div id="sidebar1">
     sidebar1 
</div>
 <div id="sidebar2">
      sidebar2  
</div>

This is the css code for the html.

div {
    width: 100px;
    height:100px;
    border-style: solid; border-width: 1px 1px 1px 1px;

}

 div#sidebar1 {
    float: left;
} 

The presentation of it looks like below in my latest firefox. Why was the text 'sidebar2' not hidden by the div1?

The original html looked like below.

In my opinion, due to the float left, the entire div2 will be overlapped by div1 including the text in div2 like below.

the below picture is the moment when I hover to the div2 in firebug. Obviously, the text 'siderbar2' seems depart from the div2. why?

Answer 1

To get the problem, you need to understand that the box is not the content .

From W3C wiki :

Each rendered line is enclosed in a separate line box.

• You make #sidebar1 floating, so you put it out of the flow
• Now, #sidebar2 box can take its place
• But , #sidebar2 's content (aka. first line box) is different from #sidebar2 box, and was pushed down by #sidebar1

To avoid this kind of behavior, you can add overflow: hidden on #sidebar2 , or better: float: left .

---

Many people doesn't understand float and don't think it put the element out of the flow. The way we use it usually makes us to think it simply "puts elements next to each other". And when we face an "issue", we solve it without understanding it.

This property's name is float , not arrange .

Answer 2

If you want the two elements to display over each other. Change the positioning of the first one to absolute.

This will take it out of the ordinary flow rendering and allow any elements to overlap with it.

div {
    width: 100px;
    height:100px;
    border-style: solid; border-width: 1px 1px 1px 1px;
    position:absolute;
}

 div#sidebar1 {
    float: left;
}