HTML中高度塌陷问题的总结

第一种方式
1.打开元素的BFC
根据W3C标准每个元素都具有BFC，且这个功能默认关闭
打开BFC方法
1.设置元素浮动
2.设置元素绝对定位
3.设置元素为inline-block
4.将元素的overflow设置成一个非visible的值
推荐将overflow的值设置成hiddle
2. lE6浏然器不支持BFC但是Ie6版本中有一个类似的功能 hasLayout打开他的方法有很多
最好的方法是直接将zoom元素设置成1
第二种方式
clear可以用来清除其他浮动元素对当前元素的影响
可选值：none 默认值，不清楚浮动
left清除左侧浮动元素的影响
right清除右侧浮动的影响
both清除两侧浮动
1.可以直接在元素的最后添加一个空白的div由于这个div并没有浮动，所以他可以撑开父元素的高度
使用这个方式可以解决问题，但是会在页面中添加多余的结构
第三种方式
通过after伪类向元素的最后添加一个空白的块元素
然后对其清除浮动
这个方法和方法二原理一样达到效果相同而且不会在页面中留下多余的div
IE6中不支持after伪类
所以在IE6中需要使用haslayout