父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零,前提是它只包含浮动元素,解决高度塌陷的问题很简单,可以浮动父级元素、清除法等等,均可实现
如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零,也就是所谓的 “高度塌陷”,如果父级元素包含背景或者边框,那么溢出的元素就不像父级元素的一部分了。解决 “高度塌陷” 的问题很简单:
1. 浮动父级元素
如果让父级元素浮动,父级元素的高度就会扩大,直到完全包含它里面的浮动元素,虽然这个方法很奇怪,但是很有效。如果选择这种方法,一定要在该元素的下个元素添加 clear:both, 确保浮动元素落到父级元素的下方。
2. 利用 overflow:hidden,zoom:1
{ overflow:hidden; zoom:1; }
overflow:hidden 属性也是 css 中比较奇怪的特性,它会强制父级元素扩大到包含浮动元素,zoom:1 只是触发 ie6 的 hasLayout 模式,不会对其他浏览器产生影响。
3. 使用 “简单清除法”
.clearfix{ zoom:1; } .clearfix:after{ content:''; display:block; height:0; font-size:0; clear:both; overflow:hidden; }
其中 zoom:1 还是只兼容 ie6,:after 是 css 中的伪类,ie6 以及以下版本都不兼容。此方法可以说是综合起来最好的方法了,不会影响任何其他样式,通用性强,覆盖面广。