css-float - 清除两者或溢出隐藏，一个clearfix解决方案

Question

我正在使用元素设计无表格网站，并且我在父元素中div有许多浮动的左右元素。divdiv

现在，我正在使用另一个div元素来自动修复父div高度：

<div style="clear:both"></div>

但是，我以同样的方式了解了以下作品：

<div style="overflow:hidden">
    <div style="float:left">...</div>
    <div style="float:right">...</div>
</div>

而且，我试过了，它可以工作，并且也减少了DOM 元素的数量。

但我不知道它是否是跨浏览器。

哪种方法有效且跨浏览器？

Answer 1

overflow:hidden使元素建立一个新的块格式化上下文。这修复了漂浮在其中的任何子项的浮动包含。这个 CSS 修复比在 HTML 中包含一个附加元素更实用，clear:both并且适用于所有现代浏览器，包括 IE7+。