如何清除浮动的四种方法

清除浮动的本质

清除浮动元素脱离标准流造成的影响

清除浮动的策略

闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外部的其他盒子

清除方法

1. 额外标签法也称隔离法，是W3C推荐的做法
   在浮动元素末尾添加一个空的标签。

<div style = "clear:both"></div>  
或
<br/>

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化较差

==注意：新标签必须是块级元素==

1. 父级添加overflow属性

可以给父级div中添加overflow属性，将其属性值设置为hidden，auto或scroll。

1. 父级添加after伪元素

：after方式是额外标签法的升级版，也是给父元素添加

.clearfix:after {
    content : "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {/* IE6、7专有*/
    *zoom: 1;
}

1. 父级添加双伪元素

.clearfix:before,.clearfix :after {
    icontent : " ";
    display:table;
}

.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}