父元素高度塌陷和BFC

父元素高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，
也就是子元素多高，父元素多高。子元素设置浮动或者设置绝对定位后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素高度塌陷。则父元素下面的元素会向上移动，导致布局混乱。

BFC

根据w3c的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context，简称BFC。该属性可以设置打开或关闭，默认是关闭的。
开启BFC属性的作用：
1、父元素的垂直外边距不会和子元素重叠
2、开启BFC的元素不会被浮动元素所覆盖
3、开启BFC的元素可以包含浮动的子元素

如何开启BFC

1、设置父元素浮动
使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失也会使父元素下面的元素上移，不能解决问题。
2、设置父元素绝对定位

3、设置父元素inline-block
使用这种方式，会导致父元素的宽度丢失。
4、将元素的overflow设置为非visible的值。
auto、scroll、hidden，我们推荐使用hidden。（不兼容ie6）

如何兼容ie6

在ie6中没有BFC，但是有另一个隐含属性：hasLayout；
该属性跟BFC类似。
开启方式有
1、给父元素设置宽度
2、zoom: 1;
我们推荐设置zoom
----zoom表示放大的意思，后边跟一个数值，表示放大几倍。----