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 (特别是 Section 6: Collapsing)