父级元素未设置高度和宽度时高度塌陷问题的解决方法

文章目录[隐藏]

父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零，前提是它只包含浮动元素，解决高度塌陷的问题很简单，可以浮动父级元素、清除法等等，均可实现

如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零，也就是所谓的 “高度塌陷”，如果父级元素包含背景或者边框，那么溢出的元素就不像父级元素的一部分了。解决 “高度塌陷” 的问题很简单：

如果让父级元素浮动，父级元素的高度就会扩大，直到完全包含它里面的浮动元素，虽然这个方法很奇怪，但是很有效。如果选择这种方法，一定要在该元素的下个元素添加 clear:both, 确保浮动元素落到父级元素的下方。

{
    overflow:hidden;
    zoom:1;
}

overflow:hidden 属性也是 css 中比较奇怪的特性，它会强制父级元素扩大到包含浮动元素，zoom:1 只是触发 ie6 的 hasLayout 模式，不会对其他浏览器产生影响。

.clearfix{
    zoom:1;
}
.clearfix:after{
    content:'';
    display:block;
    height:0;
    font-size:0;
    clear:both;
    overflow:hidden;
}

其中 zoom:1 还是只兼容 ie6，:after 是 css 中的伪类，ie6 以及以下版本都不兼容。此方法可以说是综合起来最好的方法了，不会影响任何其他样式，通用性强，覆盖面广。