0

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

  • 使 HTML 标记尽可能符合语义并且没有不必要的元素，并且
  • 成为一个跨浏览器、跨平台的解决方案，可以可靠地为大多数浏览器工作？
4

4 回答 4

3

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

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

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

你可以给包装一个溢出：

.wrapper {overflow: auto}

现在.wrapper将包含两个花车。

这通常就是所需要的。

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

于 2011-11-01T19:18:23.137 回答
1

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

.clearfix {clear: both;}

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

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

于 2011-11-02T16:46:24.600 回答
0

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

.wrapper::after {
    content:"";
    clear:both;
}
于 2011-11-03T18:58:27.203 回答
0

我见过的最好的方法是使用 :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/

于 2011-11-04T13:11:31.200 回答