网页制作

CSS清除浮动的三种方法

时间:01-12   作者:YDW   来源:YDW.ORG   阅读:150  
内容摘要:下面来看看清除浮动的三种方式:1、使用clear:both清除浮动在代码中在放一个空的div标签,然后给这个标签设置clear:both来清除浮动对页面的影响。2、利用伪元素来清除浮动给父级元素添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的

云端网

在写代码的时候,有时因为使用了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


标签:CSS浮动  清除浮动  CSS清除浮动  

  777777  666666