文章目录

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;
}

或者,如果您不需要IE8以下的支持,那么以下情况也是如此:

.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清除浮动的一些小实例,以及使用它的方法,希望能给小伙伴带来帮助。

本文网址:http://www.santii.com/article/185.html


数据更新时间:2018-09-22