如何清除浮动?

183 阅读1分钟

1.为什么需要清除浮动?

        当没有指定高度的父元素中的子元素全部浮动之后,浮动会脱离文档流,父元素的高度为0,产生高度的塌陷,影响后面标准流的排版.所以需要清除浮动.

2.如何清除浮动?

  1. 给父元素添加高度,会有局限性,
  2. 使用空元素清除浮动,添加无语义化的html标签,不利于代码的维护.
  3. 给浮动的元素的容器添加overflow:hidden;
  4. 使用:after伪元素清除浮动.clearfix的class(推荐)
.clearfix:after{

/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{

/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
*zoom: 1;
}