clearfix清除浮动如何使用？
在浏览一些网站的时候，经常看到他们的源码中有使用clearfix，用它来布局有什么作用呢？又该如何使用clearfix呢？
如果您不需要支持IE9或更低版本，则可以自由使用flexbox，而不需要使用浮动布局。
值得注意的是，如今使用漂浮的元素进行布局，越来越受到使用更好的替代品的阻碍。
- display: inline-block - 更好
- Flexbox - 最好的（但有限的浏览器支持）
Flexbox支持Firefox 18，Chrome 21，Opera 12.10，Internet Explorer 10，Safari 6.1（包括Mobile Safari）和Android的默认浏览器4.4。
但是如果一旦完全确定了它的地位，它可能是布局元素的绝对推荐方式。
clearfix是元素自动清除其子元素的一种方式，因此不需要添加额外的标记。
它通常用于浮动布局，其中元素被浮动以水平堆叠。
clearfix是一种解决浮动元素的零高度容器问题的方法
一个clearfix实例执行如下：
.clearfix:after {
content: " "; /* 旧浏览器不支持空内容 */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
content: " "; /* 旧浏览器不支持空内容 */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
或者，如果您不需要IE8以下的支持，那么以下情况也是如此：
.clearfix:after {
content: "";
display: table;
clear: both;
}
content: "";
display: table;
clear: both;
}
通常我们需要做如下的事情：
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</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>
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
以上就是使用clearfix清除浮动的一些小实例，以及使用它的方法，希望能给小伙伴带来帮助。
