清除浮动的方法有clearboth的方法、设置clearfix的方法、overflow的方法以及给父元素设置双伪元素的方法
在我们写代码的时候,有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示,接下来在文章中将为大家详细介绍几种清除浮动的方法,具有一定的参考价值,希望对大家有所帮助。
【推荐课程:CSS课程】
(3)如果该浮动元素不是第一个浮动元素,则该元素之前的元素也需要浮动,否则容易影响页面的结构显示
例:在一个div中设置三个div,让三个div的来撑开父元素
效果图:
在代码中在放一个空的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:1px solid #ccc;background:#eff2f4;overflow: auto}
(4)双伪元素方法的使用
通过给父元素设置双伪元素来达到清除浮动的效果.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
总结:以上就是本篇文章的全部内容了,希望通过这篇文章能够让大家对清除浮动的方法有所了解