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;}

然后只需在要清除的内容下插入一个标记。

Google clearfix，用于定义标记的更现代方法。

Answer 3

有点棘手，但它适用于现代浏览器：）

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

Answer 4

我见过的最好的方法是使用：before＆amp; ：用于现代浏览器的伪元素和缩放：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/

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

4 个答案: