「CSS」常见的清除浮动方法
下面介绍几种清除浮动的方案,供大家参考:
使用额外的标签clear:both
.parent {padding: 10px;width: 200px;background: red;}
.child {float: left;margin-right: 10px;width: 50px;height: 50px;background: green;}
.clear{clear: both;}
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="clear"></div>
</div>
原理:在浮动元素下面添加一个空标签,在这个标签中设置clear:both;
优点:简单,浏览器兼容性好;
缺点:增加页面的标签,造成页面混乱;
使用overflow属性
.parent {padding: 10px;
background: red
;overflow: hidden;}
.child {float: left;
margin-right: 10px
;width: 50px
;height: 50px
;background: green;}
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>
原理:父元素定义overflow:hidden,此时,浏览器会自动检查浮动区域的高度;
优点:简单,无需增加新的标签;
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏;
使用伪元素:after清除浮动
.parent {padding: 10px
;background: red;}
.parent:after{// 定义元素前后的生成内容,这里是定义元素后的空内容content: '';display: block;clear: both;}
.child {float: left;
margin-right:10px
;width: 50px
;height: 50px
;background: green;}
原理:原理同方法一有点类似,在元素最后定义一个空的内容,然后让该空的内容来清除浮动;
优点:无需额外的标签,浏览器兼容性好,是目前用的最多的一种清除浮动的方法之一;
缺点:代码稍微复杂点,初学者可能不太能理解其原理;