最近我浏览了一些网站的代码，看到每个<；部门>有一个类clearfix
在快速的谷歌搜索之后，我了解到它有时适用于IE6，但实际上什么是clearfix
您能提供一些带有clearfix的布局与没有clearfix的布局相比的示例吗
如果您不需要支持IE9或更低版本，您可以自由使用flexbox，而不需要使用浮动布局
值得注意的是，如今，随着使用更好的替代方案，越来越不鼓励在布局中使用浮动元素
显示：内联块-更好- Flexbox-最佳（但浏览器支持有限）
Firefox 18、Chrome 21、Opera 12.10、Internet Explorer 10、Safari 6.1（包括移动Safari）和Android默认浏览器4.4支持Flexbox
有关详细的浏览器列表，请参见：https://caniuse.com/flexbox.
（也许一旦它的位置完全确定，它可能是绝对推荐的元素布局方式。）
clearfix是元素自动清除其子元素的一种方法，这样您就不需要添加额外的标记。它通常用于浮动布局，其中元素浮动以水平堆叠
clearfix是解决浮动元素的零高度容器问题的一种方法
clearfix的执行如下：
.clearfix:after{
内容：“；/*旧浏览器不支持空内容*/
可见性：隐藏；
显示：块；
身高：0；
明确：两者皆有；
}
或者，如果您不需要IE<；8支持，以下也可以：
.clearfix:after{
内容：“；
显示：表格；
明确：两者皆有；
}
通常，您需要执行以下操作：
<；部门>；
<；div style=“float:left；”>；边栏</部门>；
<；div style=“clear:both；”和</部门><；！--清除浮动-->；
</部门>；
使用clearfix，您只需要以下内容：
<；div class=“clearfix”>；
<；div style=“float:left；”class=“clearfix”>；边栏</部门>；
<；！--没有清理分区--&燃气轮机；
</部门>；
请在这篇文章中阅读相关内容-作者：Chris [email protected] Tricks