最近,我正在浏览一些网站的代码,发现每个<div>
都有一个类clearfix
。
经过快速的Google搜索后,我了解到有时是针对IE6的,但实际上是一个clearfix吗?
与没有clearfix的布局相比,您能否提供一些带有clearfix的布局的示例?
最佳答案
如果您不需要支持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。
(也许一旦位置完全确定,这可能是绝对推荐的元素布局方式。)
(图像由@Kyo最初发布在this answer中)
clearfix是元素自动清除其子元素的一种方式,因此您无需添加其他标记。它通常用于将元素浮动以水平堆叠的浮动布局中。
clearfix是一种对抗浮动元素zero-height container problem的方法
一个clearfix执行如下:
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
或者,如果您不需要IE
.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>
在this article - by Chris Coyer @ CSS-Tricks中了解它