协慌网

最近我查看了一些网站的代码，发现每个<div>都有一个类clearfix 。

经过快速谷歌搜索，我了解到它有时适用于 IE6，但实际上是什么是一个 clearfix？

与没有 clearfix 的布局相比，您能提供一些带有 clearfix 的布局示例吗？

如果您不需要支持 IE9 或更低版本，则可以自由使用 flexbox，而不需要使用浮动布局。

值得注意的是，今天，随着使用更好的替代品，使用浮动元素进行布局越来越不受欢迎。

• display: inline-block - 更好
• Flexbox - 最佳（但有限的浏览器支持）

Firefox 18，Chrome 21，Opera 12.10 和 Internet Explorer 10，Safari 6.1（包括 Mobile Safari）和 Android 的默认浏览器 4.4 支持 Flexbox。

有关详细的浏览器列表，请访问： http ： //caniuse.com/flexbox 。

（也许一旦它的位置完全建立起来，它可能是绝对推荐的布局元素的方式。）

clearfix 是元素自动清除其子元素的一种方式，因此您无需添加其他标记。它通常用于浮动布局 ，其中元素浮动以水平堆叠。

clearfix 是一种解决浮动元素的零高度容器问题的方法

clearfix 执行如下：

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

或者，如果您不需要 IE <8 支持，以下情况也可以：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

通常你需要做如下的事情：

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

使用 clearfix，您只需要以下内容：

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

在本文中阅读- 由 Chris Coyer @ CSS-Tricks 撰写

如果您通过可视化学习，这张图片可能会帮助您了解clearfix 的作用。

其他答案都是正确的。但我想补充一点，它是人们第一次学习 CSS 的时候的遗留物，并且滥用float来完成所有的布局。 float意味着在长文本旁边做漂浮图像之类的东西，但很多人用它作为主要的布局机制。因为它不是真正的意思，你需要像 “clearfix” 这样的黑客才能使它工作。

这些天display: inline-block是一个可靠的替代方案（ IE6 和 IE7 除外 ），虽然更现代的浏览器在 flexbox，网格布局等名称下具有更有用的布局机制。