清除浮动的原理和方法

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

相信这段代码大家并不陌生，清除浮动的常用方法，但新手可能不理解为什么要这么写。

我们知道，浮动很好用，但设置浮动却可能造成意想不到的后果，这时我们就需要清除浮动了。

看以下几种浮动造成的影响：

图1 浮动前 图2 给红色盒子设置float:left后，可以看到，红色盒子脱离正常流，浮动在上层

这是块级元素的情况，对于行内元素，比如一段文字，则行内元素则会紧跟在浮动元素后面

图3

还有常见父元素高度塌陷问题，给红色和黄色盒子都设置浮动float:left后，若没有给父元素设置高度（宽度已设置），由于两个盒子都是浮动的，没有了内含物的支撑，父元素则没有了高度（除了边框）；

图4

若我们想要用浮动布局，但又不想要这些副作用，这时就要清除浮动了。我们现在来解决一下高度塌陷的问题。

在图4的基础上，我们再在父元素里面再添加一个元素，即下图蓝色盒子，给它设置clear：both属性来清除前面元素浮动造成的高度塌陷问题，看父元素高度被又子元素们撑起来了；

图5

但一般我们不会特地加一个蓝色div，这显得代码累赘，还不便于在其他需要用到的地方复用，怎么办，这时我们想到，利用伪元素：after{content:"."}，在父元素里面插入这个伪元素来代替这块蓝色盒子

//（content的内容属于父元素（被选元素），而非在父元素之后，content：“.”里面可以随意写，一般写个点）。

然后我们为它设置display：block（不设置为块状元素不行），再设置height：0，visibility：hidden来使这个元素不占据高度并隐藏（得其功能，去其形式），于是便有了文章开头的代码：

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

同理，对于图2，若我们不想要红色盒子挡住黄色盒子，在浮动元素（红色盒子）后面的不想被挡住的元素（黄色盒子）设置clear:both就可以了。

注：clearfix类名属于父元素。

IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题

.clearfix {*zoom:1;}