如何处理流体 div 的高度？

Question

一个案例：一个div在里面div.

当子 div 包含一些文本并使用 CSS3 浮动 属性 向左浮动时，父 div 的 高度 变为 零。

这是什么原因，有什么解决办法吗？

注意：div 的大小是百分比（%）。

Answer 1

浮动元素会使它脱离正常的元素流，其中一个副作用是它将不再影响其父元素的尺寸。

清除 float 的最简单方法是将父项的 overflow 属性 设置为 hidden。

但是，这可能是不合需要的，因为您可以在父级中嵌套元素，您 需要 溢出它。在那种情况下，使用 :after 伪元素来清除浮动元素。

.parent:after{
    clear:both;
    content:"";
    display:block;
    height:0;
}

第三种解决方案是简单地给跟随浮动元素的兄弟 clear 属性 但这显然取决于您的布局和标记。

顺便说一下，float 不是 CSS3 属性，它已经存在了一段时间。