[分享]css3怎么清除浮动

CSS3提供了4种清除浮动的方法，分别是：clearfix、overflow、after和before。下面分别进行介绍。1. clearfix这是一种最常用的清除浮动方法。它通过添加额外的CSS代码...

CSS3提供了4种清除浮动的方法，分别是：

clearfix

overflow

after

before

1. clearfix

这是一种最常用的清除浮动方法。它通过添加额外的CSS代码实现清除浮动的效果。具体代码如下：

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

以上代码中，首先给父级元素添加了一个clearfix样式，然后在clearfix样式中通过:after伪元素添加了一块空间，最后通过clear:both属性清除浮动。

2. overflow

这种方法相对来说比较简单，只需要在父级元素上设置overflow:hidden;即可，代码如下：

.parent{
    overflow:hidden;
} 

但这种方法要注意的是，如果子元素的宽度或高度超过了父级元素，那么会被裁剪掉，影响页面的布局。

3. after

这种方法和clearfix方法类似，只不过是直接在父级元素上添加:after伪元素，代码如下：

.parent:after{
    content:"";
    display:block;
    clear:both;
} 

这种方法同样需要注意，如果子元素的宽度或高度超过了父级元素，也会对页面布局产生影响。

4. before

这种方法和after方法类似，只不过是在父级元素前添加:before伪元素，代码如下：

.parent:before{
    content:"";
    display:block;
    clear:both;
} 

同样需要注意，如果子元素的宽度或高度超过了父级元素，也会对页面布局产生影响。