RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案

效果图:

加了float:left之后,父元素无法被撑开

清除浮动的方法

(1)使用clear:both清除浮动

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

(2)利用伪元素clearfix来清除浮动

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

.clearfix:after{

content:"";

display:block;

visibility:hidden;

clear:both;

}

(3)overflow方法的使用

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

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

(4)双伪元素方法的使用

通过给父元素设置双伪元素来达到清除浮动的效果

.clearfix:before,.clearfix:after{

content:"";

display:block;

clear:both;

}

关于“css中清除浮动的方法是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前名称:css中清除浮动的方法是什么
转载来于:http://jxjierui.cn/article/pssscc.html
Top