清除浮动

为什么需要清除浮动？

1.父级没高度

2.子盒子浮动了

3.影响下面布局了

 

清除浮动的方式	优点	缺点	代码
额外标签法(隔墙法)	通俗易懂，书写方便	添加许多无意义的标签， 结构化较差	<div style=”clear:both”></div>
父级 overflow:hidden;	书写简单	溢出隐藏	父级overflow:hidden;
父级after伪元素	结构语义化正确	由于IE6-7不支持:after， 兼容性问题	.clearfix:after {  content: "";  display: block;  height: 0;  clear: both;  visibility: hidden; } .clearfix { /* IE6、7 专有 */  *zoom: 1; }
父级双伪元素	结构语义化正确	由于IE6-7不支持:after， 兼容性问题	.clearfix:before,.clearfix:after {  content:"";  display:table; } .clearfix:after {  clear:both; } .clearfix {  *zoom:1; }