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