html - 什么是 clearfix？

Question

最近我正在查看一些网站的代码，看到每个 <div>上过课clearfix .

在 Google 上快速搜索后，我了解到它有时是针对 IE6 的，但实际上什么是 clearfix？

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

Answer 1

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

值得注意的是，如今，随着更好的替代品的使用，越来越不鼓励使用 float 元素进行布局。

• 显示:内联 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 是一种元素自动清除其子元素的方法，因此您无需添加额外的标记。它通常用于 float 布局，其中元素 float 以水平堆叠。

clearfix 是一种对抗 zero-height container problem 的方法 用于 float 元素

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>

阅读 this article - by Chris Coyer @ CSS-Tricks