浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
清除浮动的几种方法:
1.额外标签法,<div style="clear:both;"></div>/*(缺点:不过这个办***增加额外的标签使HTML结构看起来不够简洁。) */ 2.浮动父元素 /* 过多使用与Web精髓相违背 */ 3.设置overflow为hidden或者auto 4.使用after伪类 #parent:after{ content:"."; height:0; visibility:hidden; display:block; clear:both;
} /* 优化为 ====> */ .clearfix:after, .clearfix:before{ content: " "; display: table;
} .clearfix:after{ clear: both;
} /* 伪类before可以解决浏览器顶部空白部分,即上下margin重合问题 */