点击这里成为作者 · 更新于 2018-11-28 11:00:43

使用float造成容器高度塌陷的原理与解决方法

在设计网页布局时,有一个很蛋疼的问题,那就是使用浮动(float)时的父容器塌陷问题。

  先说一下什么是塌陷:

  塌陷:父元素只包含浮动元素,那么它的高度就会塌缩为零(前提就是没有设置高度height属性,或者设置了为auto就会出现这种情况,当然不是所用的浏览器都是这样的,在IE8下面没有这种情况。)

  如果父元素不包含任何的可见背景,这个问题会很难被注意到,但是这是一个很重要的问题。

解决办法:

1.在使用浮动的元素后面加一个div,属性设置为style="clear: both" 优点:通俗易懂,容易掌握 缺点:将添加很多无意义的空标签,有违结构与表现的分离

2.在使用浮动元素的父级容器加属性overflow:hidden 优点:不存在结构和语义化问题,代码量极少 缺点:overflow:hidden 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素; overflow:auto多层嵌套后,firefox与IE 可能会出现显示错误;

3.父元素设置display: table 优点:结构语义化完全正确,代码量极少 缺点:盒模型属性已经改变,由此造成的一系列问题,得不偿失

4、给父级容器加一个class="clearfix"

.clearfix:after {
    display:block; 
    content:"clear"; 
    clear:both; 
    line-height:0;
    visibility:hidden;
}

(1) display:block使生成的元素以块级元素显示,占满剩余空间;

(2) height:0避免生成内容破坏原有布局的高度。

(3) visibility:hidden使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;

(4) 通过content:""生成内容作为最后一个元素,至于content里面是点还是其他都是可以的

(5) zoom:1触发IE hasLayout。

通过分析发现,除了clear:both用来闭合浮动的,其他代码无非都是为了隐藏掉content生成的内容,这也就是其他版本的闭合浮动为什么会有font-size:0line-height:0