clearfix清除浮动如何使用?
在浏览一些网站的时候,经常看到他们的源码中有使用clearfix,用它来布局有什么作用呢?又该如何使用clearfix呢?
如果您不需要支持IE9或更低版本,则可以自由使用flexbox,而不需要使用浮动布局。
值得注意的是,如今使用漂浮的元素进行布局,越来越受到使用更好的替代品的阻碍。
- display: inline-block - 更好
- Flexbox - 最好的(但有限的浏览器支持)
Flexbox支持Firefox 18,Chrome 21,Opera 12.10,Internet Explorer 10,Safari 6.1(包括Mobile Safari)和Android的默认浏览器4.4。
但是如果一旦完全确定了它的地位,它可能是布局元素的绝对推荐方式。
clearfix是元素自动清除其子元素的一种方式,因此不需要添加额外的标记。
它通常用于浮动布局,其中元素被浮动以水平堆叠。
clearfix是一种解决浮动元素的零高度容器问题的方法
一个clearfix实例执行如下:
.clearfix:after {
content: " "; /* 旧浏览器不支持空内容 */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
content: " "; /* 旧浏览器不支持空内容 */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
或者,如果您不需要IE8以下的支持,那么以下情况也是如此:
.clearfix:after {
content: "";
display: table;
clear: both;
}
content: "";
display: table;
clear: both;
}
通常我们需要做如下的事情:
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</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>
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
以上就是使用clearfix清除浮动的一些小实例,以及使用它的方法,希望能给小伙伴带来帮助。