html - 什么是清除修复？

Question

最近我在查看一些网站的代码，发现每个 <div>上课了clearfix .

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

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

Answer 1

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

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

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

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

按如下方式执行清除修复:

.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