「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;}

原理：原理同方法一有点类似，在元素最后定义一个空的内容，然后让该空的内容来清除浮动；

优点：无需额外的标签，浏览器兼容性好，是目前用的最多的一种清除浮动的方法之一；

缺点：代码稍微复杂点，初学者可能不太能理解其原理；