CSS高度塌陷
问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内。
比如这样:
html:
<div id="parent"> <div class="left"></div> <div class="right"></div> </div>
CSS:
div { border: 2px solid #000; } .left { width: 100px; height: 100px; float: left; } .right { width: 200px; height: 200px; float: left; }
结果是这样的:
这就是高度塌陷的问题,各个浏览器,包括IE6都是这样的。
解决方法:
父元素设置overflow:hidden 即:
#parent { overflow: hidden; }
或者:
添加一个子元素清除浮动。
.clear { width: 0; height: 0; clear: both; visibility: hidden; }
上面的方法在除了IE6的浏览器都是有效的,效果图:
但IE6中,overflow:hidden,直接没作用,清除浮动后却是这样的:
父元素断了。。。。。
可以使用IE6中的一个bug,他的height和min-height作用一样,所以可以给父元素任意设置一个高度。
#parent { * height: 1%; }
由于是专为IE6设置的,前面加个*号,只有IE识别。
这样不论是overflow还是clear效果都可以了。
但是还有一个问题,虽然高度都扩展了,但是使用overflow,底边是紧贴的,使用清除浮动时候的是有一定间距的。
在《精通CSS》一书中是这样的解决的。
.clear:after { content: ‘.‘; height: 0; clear: both; visibility: hidden; display: block; }
以这样的方式来清除浮动。
这样效果就统一了。
在其他的博客中,还看到,其实针对IE6还可以使用zoom:1。
总结一下,方法还是挺多,使用overflow简单,也不用额外引入元素,但有时候会引起滚动条的问题。
清除浮动通用,但会引入其他外部元素。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。