1.为什么需要清除浮动?
当没有指定高度的父元素中的子元素全部浮动之后,浮动会脱离文档流,父元素的高度为0,产生高度的塌陷,影响后面标准流的排版.所以需要清除浮动.
2.如何清除浮动?
- 给父元素添加高度,会有局限性,
- 使用空元素清除浮动,添加无语义化的html标签,不利于代码的维护.
- 给浮动的元素的容器添加overflow:hidden;
- 使用:after伪元素清除浮动.clearfix的class(推荐)
.clearfix:after{
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
*zoom: 1;
}