什么是clearfix?

最近,我正在浏览某些网站的代码,发现每个人<div> 都有一个课程clearfix

经过快速的Google搜索后,我了解到有时是针对IE6的,但 是一个clearfix吗?

与没有clearfix的布局相比,您能否提供一些带有clearfix的布局的示例?

回答:

如果您不需要支持IE9或更低版本,则可以自由使用flexbox,也不需要使用浮动布局。

值得注意的是,如今,随着使用更好的替代方案,越来越不鼓励使用浮动元素进行布局。

  • display: inline-block -更好
  • Flexbox- 最佳(但对浏览器的支持有限)

Firefox 18,Chrome 21,Opera12.10和InternetExplorer10,Safari6.1(包括MobileSafari)和Android的默认浏览器4.4支持Flexbox。

(也许一旦位置完全确定,这可能是绝对推荐的元素布局方式。)


clearfix是元素 一种方法,因此您无需添加其他标记。它通常用于将元素浮动以水平堆叠的 浮动布局 中。

clearfix是 浮动元素的 零高度容器问题的一种方法

一个clearfix执行如下:

.clearfix:after {

content: " "; /* Older browser do not support empty 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> <!-- Clear the float -->

</div>

使用clearfix,您仅需要以下内容:

<div class="clearfix">

<div style="float: left;" class="clearfix">Sidebar</div>

<!-- No Clearing div! -->

</div>

以上是 什么是clearfix? 的全部内容, 来源链接: utcz.com/qa/434824.html

回到顶部