关于clearfix

2016/06/09
项目中使用less的时候，直接调用个mixin就好了，但是纯CSS写个清楚浮动总是想不起那几个代码，又把这个概念复习了一边。

以下翻译stack overflow最高票的答案，只翻译重要内容。

如果你不需要支持IE 9及更低的IE版本浏览器，你完全可以抛弃float布局，去使用flexbox吧。
现在不鼓励使用浮动元素布局，因为你有更好的选择：

• display: inline-block 更好
• Flexbox 最好，但是受浏览器限制

Flexbox被Firefox 18、Chrome 21、Opera 12.10、IE 10、Safari 6.1（包括移动端Safari）和Android默认浏览器（版本4.4）支持。

更多浏览器支持，请点这里

clearfix是一种可以让一个元素自动清除子元素浮动的解决方案，这样你不需要在页面上额外的加上一个标签。
clearfix也是一种因为元素浮动造成的 容器0高度 的解决方案。

clearfix通常这些写：

.clearfix:after {
    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> <!-- 清除浮动 -->
</div>

有了clearfix，你只需要这样写：

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- 不在需要清除浮动标签 -->
</div>

更多Float细节，请点击 All About Floats。