最近,我正在浏览一些网站的代码,发现每个<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中了解它

10-07 18:19
查看更多