html高度塌陷问题的解决方案

高度塌陷问题：
在文档流中，父元素是被子元素给撑开的，也就是说子元素有多高，父元素就有多高
但是当为子元素设置浮动后 ，元素就会完全脱离文档流导致父元素的高度塌陷，由于父元素高度塌陷了，则父元素的所有元素都会向上移动，这样页面布局就会混乱。
所以开发中一定要避免高度塌陷问题
1， 我们可以将父元素的高度写死，以避免塌陷问题的出现
但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以不建议使用
2， 根据w3c标准，在页面中的元素都有一个隐含的属性叫做Block Formatting Context简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
当元素开起BFC属性以后，元素具有如下的特性：
一， 父元素的垂直外边距不会和子元素重叠
二， 开启BFC的元素不会被浮动元素所覆盖
三， 开启BFC的元素可以包含浮动的子元素
那怎么开启BFC呢？
 设置浮动元素
设置高度塌陷的那个元素（也就是父元素）也浮动，该方法不好，虽然可以撑开父元素，但是会导致下边的元元素上移，不能解决问题
 设置绝对定位

 设置元素为inline-block
设置高度塌陷的那个元素（也就是父元素）为inline-block，可以解决问题但会导致宽度丢失，不推荐使用这种方式
 将元素的overflow设置为一个非visible值
设置高度塌陷的那个元素（也就是父元素）的overflow设置为hidden是副作用最小的开启BFC的方式
Overflow:hidden;
但是ie6的版本及以下的浏览器并不支持该BFC所以使用这种方法不能兼容IE6
Ie6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似
开启hasLayout的方式很多，我们可以直接使用一种副作用最小的
直接将元素的zoom设置为1即可
zoom:1;
zoom表示放大的意思，后边跟着一个数值，写几就放大几倍
zoom：1;表示不放大元素，但是通过该样式可以开启hasLayout
但是这种方法只支持IE8一下的浏览器，其他的浏览器不支持
所以我看可以写成以下的那种格式兼容所以浏览器
解决高度塌陷方案一
zoom:1;
overflow:hidden;
解决高度塌陷方案二
可以直接在高度塌陷的父元素子元素的最后添加一个空白的div
由于这个div并没有浮动，所以他可以撑开父元素的高度的
然后对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用。使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构，
该方法所以的浏览器都兼容

而通过after伪类，选中该塌陷元素的后边
格式：
塌陷元素的选择器：after{
/添加一个内容/
content:””;
/转换为一个块元素/
display:block;
/清除两侧的浮动/
clear:both;
}
但在IE6的版本不支持，所以还要使用hasLayout来处理