冰冰的小屋

路漫漫其修远兮,吾将上下而求索

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

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

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

1. 浮动父级元素

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

2. 利用 overflow:hidden,zoom:1

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

3. 使用 “简单清除法”

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

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注