css高度塌陷

html-css023

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这个值调小了模块就上去了.