css清除浮动的几种方法

先看看为什么要清除浮动：

现有html结构如下：

<div class="content">
  <div class="div div1"></div>
  <div class="div div2"></div>
  <div class="div div3"></div>
</div>

css：

.content{
    border: 1px solid #ccc;
    background: #fc9;
    color: #fff;
    margin: 50px auto;
    padding: 50px;
}
.div{
    float:left;
    width: 100px;
    height:100px;
}
.div1{
    background-color: #ffccf7;
}
.div2{
    background-color: #b1fffc;
}
.div3{
    background-color: #fffab1;
}

发现，里面的块元素并没有把父元素撑开。这显然不是我们想要的结果，因此，我们需要清除浮动。

1.加入新的元素：

<div class="content">
  <div class="div div1"></div>
  <div class="div div2"></div>
  <div class="div div3"></div>
  <div class="clear"></div>
</div>

.clear{
    clear:both;
}

但显然，我们还有更好的方法来代替这一新元素：after伪类：

.content:after{
    content:".";
    height:0;
    display: block;
    clear:both;
    visibility: hidden;
}

要注意，height值必须设置为0，否则content会变宽；display设置为block是为了在FF/chrome/opera/IE8下也起作用；visibility则是让浏览器渲染，但不显示。

2.设置父元素overflow

也可以通过设置父元素overflow设置为auto或hidden来达到效果，但使用visible值达不到效果。