CSS清除浮动的三种方法

云端网

在写代码的时候，有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示

下面来看看清除浮动的三种方式：

1、使用clear:both清除浮动

在代码中在放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护

2、利用伪元素来清除浮动

给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的

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

3、使用CSS的属性

当给父元素设置了样式，不管是:或:auto都可以清除浮动只要它的值不为就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果

.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}

(云端网 )

www.ydw.org