什么是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