CSS 清除浮动的方法及技巧汇总

前言

浮动相信在平时的项目开发当中你一定用了不少,也遇到了不少。也知道有可以清除浮动的最常用的方法。那么下面我就给大家分享下我所知道的可清除浮动的方法。

清除浮动方法

下面是一个基础的 HTML 代码结构:

<!-- HTML代码 -->
<div class="wrap-clear">
  <div class="left-column">left-column-1</div>
  <div class="left-column">left-column-2</div>
</div>

如果没有说明,下面的都使用此结构。

float 法

也就是给父元素一个浮动,以达到清除浮动的效果。

.wrap-clear{
  border: 1px solid #ccc;
  float: left;
}
.left-column{
  float: left;
  border: 1px solid teal;
}

这时有一个小问题,加了float:left后,元素的会包裹里面的元素及内容,而不会像块元素那样100%宽,所以如果你占满一行,那么你可以给元素加上width:100%。

overflow: hidden 法

这种方法相信你已经不陌生了,但我还是把这几行可怜的代码贴出来

.wrap-clear{
  overflow: hidden;
  border:1px solid #ccc;
}
.left-column{
  float: left;
  border:1px solid teal;
}

上面的代码就不作过多的解释了。

overflow: auto 法

overflow:auto 法跟overflow:hidden 法写法差不多,改下属性值,然后再追加一个属性就可以了代码如下。

.wrap-clear{
  overflow: auto;
  zoom: 1; 
  border: 1px solid #ccc;
}
.left-column{
  float: left;
  border: 1px solid teal;
}

:after 伪类法

.wrap-clear{
  border: 1px solid #ccc;
  zoom: 1;
}
.wrap-clear:after{
  content: '\0020';
  height: 0;
  line-height: 0;
  visibility: hidden;
  clear: both;
  display: block;
}
.left-column{
  float: left;
  border: 1px solid teal;
}

上面代码中的zoom:1是为了兼容IE7及以下不支持伪类的版本,网上有很多地方说是IE6,但我测试时发现,IE7,IE6,IE5都不支持伪类,所以给.wrap-clear 类添加zoom:1属性来实现清除浮动的效果。这个是IE特有的属性。

下面是需要添加额外元素的清除浮动的方法,HTML 代码结构如下:

<!-- HTML代码 -->
<div class="wrap">
  <div class="left-column">left-column-1</div>
  <div class="left-column">left-column-2</div>
  <div class="clear"></div>
</div>

空标签法

其实这个方法跟上面的伪类方法原理是一样的,只是我们是在HTML结构代码里手动地加了一个空标签

.wrap{
  border: 1px solid #ccc;
}
.clear{
  content: '.';
  height: 0;
  line-height: 0;
  visibility: hidden;
  clear: both;
  display: block;
}
.left-column{
  float: left;
  border: 1px solid teal;
}

display: inline-block 法

这种方法可能你见得比较少,但display:inline-block确确实实帮你解决了这个清除浮动的问题。

.wrap-clear{
  border: 1px solid #ccc;
  display: inline-block;
  width: 100%
}
.left-column{
  float: left;
  border: 1px solid teal;
}

如果.wrap-clear类里没有添加width:100%;那么 添加了.wrap-clear类的这个 div 是紧紧的包裹着子元素的,而不是像块级元素那么完为100%,所以这里你可以根据自己的实践需求进行设置。

原理

  1. overflow:hidden 触发了BFC。
  2. display:inline-block 触发了BFC。
  3. clear:both 清除浮动。
  4. 使用 zoom:1触发 hasLayout。

只要能触发BFC的属性都可以实现清除浮动的效果,触发BFC的属性有很多如:absolute、table-cell(IE8+)也是可以的,只不过使用了absolute 属性可能就会得不尝失了,因为容器脱离文档流了。

触发 BFC

float: left|right
overflow: hidden|auto|scroll
display: table-cell|table-caption|inline-block
position: absolute|fixed

以上任意一个都可以实现清除浮动。

触发 hasLayout(兼容低版本的IE)

position: absolute 
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl

下面这个是清除浮动的最终代码,你可以直接拿过去用,但也要看情况,因为如果你要清除浮动的元素已经恰好用上了触发BFC的属性,那么这个就不用引入了。用法:在需要清除浮动的元素上添加 clearfix 类即可。

.clearfix{
    *zoom:1;
}
.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

上面的 *zoom:1 中的“*”可加可不加,因为这个只有IE认得,其它浏览器是不认的。