什么是 clearfix？

Question

最近我正在浏览一些网站的代码，发现每个 <div> 都有一个类 clearfix 。

快速谷歌搜索后，我了解到它有时是针对 IE6 的，但 究竟 什么是 clearfix？

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

原文由 H Bellamy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果不需要支持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。

有关详细的浏览器列表，请参阅： https ://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 支持，则以下内容也可以：

 .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

原文由 Madara‘s Ghost 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

其他答案都是正确的。但我想补充一点，这是人们第一次学习 CSS 并滥用 float 进行所有布局时的遗留物。 float 用于在长文本旁边做浮动图像之类的事情，但很多人将其用作主要布局机制。由于它并不是真正的目的，因此您需要像“clearfix”这样的 hack 来使其工作。

这些天 display: inline-block 是一个可靠的选择（ IE6 和 IE7 除外），尽管更多现代浏览器在 flexbox、网格布局等名称下提供了更有用的布局机制。

原文由 Domenic 发布，翻译遵循 CC BY-SA 3.0 许可协议