清除浮动闭合浮动的四种方法

写网页的时候避免不了要写一些浮动，自然也要做清除浮动的处理，清除浮动目的就是解决父盒子高度为0的为题。常见方法有如下四种。

方法一：额外标签法
这种方法是在浮动的元素后面添加额外的带有clear:both样式的标签来清除浮动。

.C{width:0;display:block;overflow:hidden;clear:both;}
<div class="parent">
<div class="box1">盒子一</div>
<div class="box2">盒子二</div>
<br class="C"/>
</div>

方法二：在父盒子加overflow:hidden
这种方法是触发BFC模式，就不用清除浮动了。

方法三：伪元素
虽然在css3中规定伪类用单冒号（:），伪元素用双冒号（::），但为了兼容，这里伪元素还是写成单冒号。

.clearfix:after{content:"";visibility:hidden;display:block;height:0;clear:both;}
.clearfix{zoom:1}
<div class="parent clearfix">
<div class="box1">盒子一</div>
<div class="box2">盒子二</div>
</div>

方法四：双伪元素

.clearfix:before,.clearfix:after{content:"",display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1}
<div class="parent clearfix">
<div class="box1">盒子一</div>
<div class="box2">盒子二</div>
</div>