清除 CSS 中浮动元素的最佳方法是什么？

Question

目前认为清除 CSS 浮动元素的最佳方法是什么：

• 保持 HTML 标记的语义并尽可能消除不必要的元素，并且
• 成为对大多数浏览器可靠工作的跨浏览器、跨平台解决方案？

Answer 1

这不是一个图形设计问题。它是 CSS 的，所以属于 StackOverflow。

也就是说，保持 HTML 干净的答案就是给父级提供溢出。因此，如果您的标记是：

<div class="wrapper">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>

您可以给包装器一个溢出：

.wrapper {overflow: auto}

现在 .wrapper 将包含两个浮点数。

这通常就是所需要的全部。

有时，在较旧的 IE 中，容器也需要宽度。

Answer 2

您可以使这个过程变得更复杂，但一个简单的方法是在 CSS 中添加一个名为 .clearfix 的类，并带有此属性：

.clearfix {clear: both;}

然后只需在要清除的内容下方插入一个标签即可。

谷歌clearfix以更现代的方式定义标签。

Answer 3

我见过的最好的方法是使用 :before & :after 伪元素适用于现代浏览器，zoom: 1 适用于旧版本的 IE。

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

更多信息请点击这里：
http://nicolasgallagher.com/micro-clearfix-hack/

Answer 4

有点棘手，但它适用于现代浏览器:)

.wrapper::after {
    content:"";
    clear:both;
}