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

Question

这是html代码。

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

这是html的css代码。

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

}

 div#sidebar1 {
    float: left;
} 

在我最新的Firefox中，它的演示如下所示。 为什么文本'sidebar2'没有被div1隐藏？

原始html如下所示。

在我看来，由于浮动左侧，整个div2将与div1重叠，包括div2中的文本，如下所示。

下面的图片是我在firebug中盘旋到div2的那一刻。显然，文本'siderbar2'似乎偏离了div2。为什么？

Answer 1

要解决此问题，您需要了解该框不是内容。

From W3C wiki：

  

每条渲染线都包含在一个单独的线框中。

• 你让#sidebar1浮动，所以你把它从流程中删除了
• 现在，#sidebar2框可以取代它
• 但，#sidebar2的内容（又名第一行框）与#sidebar2框不同，并被#sidebar1推下

要避免此类行为，您可以在overflow: hidden上添加#sidebar2，或者更好：float: left。

---

许多人不理解float并且不认为它将元素排除在外。我们使用它的方式通常会让我们简单地认为它将元素放在彼此旁边＆＃34;。当我们遇到问题时，我们会在不理解的情况下解决问题。

此媒体资源的名称为float，而非arrange。

Answer 2

如果您希望两个元素相互显示。将第一个的定位更改为绝对。

这将使其脱离普通的流渲染，并允许任何元素与其重叠。

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

 div#sidebar1 {
    float: left;
}