css高度塌陷

html-css014

css高度塌陷,第1张

在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。

避免父元素高度塌陷的方法:

 1.加一个空div标签清除浮动(缺点:不利于优化,优点:兼容性强)<div style="clear:both"></div>

2. overflow+zoom(优点:兼容性强。 缺点:对margin属性有影响,不能设负值,设负值无效。负值绝对定位也不可以。)

example { overflow:hiddenzoom:1}

3.after+zoom (最好用的,最推荐的,兼容性也很好)

example{zoom:1}

example:after{ display:blockcontent:'', clear:bothheight:0overflow:hidden}

4.让父元素本身也浮动(不推荐,如果也设置浮动,父元素宽度就会随着子元素变化)

#comm_info div.line{margin-top:4pxline-height:8pxborder-top:2px solid #F5708Bbackground:url(图片地址) no-repeat bottompadding-bottom: 200pxmargin-bottom: 32px}

padding-bottom: 200px高度为200

把200这个值调小了模块就上去了.