html - 不占用子元素宽度或高度的元素

Question

我不时遇到这个问题，但一直无法理解是什么原因造成的。

<div id="wrapper">
    <div id="primary">content</div>
    <div id="secondary">content</div>
 </div>

#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}

然后您查看 Chrome 的检查元素上的属性，包装器 div 显示为 0px 高度和 0px 宽度。

Answer 1

这通常被称为clearfix问题。在下面放置内联样式的 div 的另一种方法是分配overflow:hidden给包装器 div。

有关清除问题的更多信息，请查看A List Apart：CSS Floats 101（第 6 节：特别是折叠）

Answer 2

您需要<div style='clear:both'></div>在<div id='secondary'/>. CSS 标签“float”不允许父级查看子级实际结束的位置。添加清除任何浮动左侧和右侧的 div 允许父元素正确填充空间。

Answer 3

您需要尝试使用浮动清除 div，因此请尝试这些，<div>在第二个 div 之后添加一个，并添加style="clear:both"到我刚才说创建为样式的 div，或者您可以简单地指定包装器的确切高度和宽度div，请让我知道会发生什么。祝你好运！