什么是clearfix？

Question

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

经过快速的Google搜索后，我了解到有时是针对IE6的，但 实际上 是一个clearfix吗？

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

Answer 1

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

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

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

Firefox 18，Chrome 21，Opera12.10和InternetExplorer10，Safari6.1（包括MobileSafari）和Android的默认浏览器4.4支持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>