解决css中高度塌陷的问题
导致高度塌陷的原因
在文档流中，父元素的高度默认是被子元素所撑开的，也就是说子元素有多高，父元素就有多高。但是当为子元素设置浮动以后，子元素将完全脱离文档流，脱离文档流后子元素将无法撑起父元素的高度，这时就会导致父元素高度塌陷。由于父元素的高度塌陷后，父元素下面的元素就会向上移动，这样将会导致整个页面的布局混乱。
解决高度塌陷
方法一：
可以将父元素的高度写死，以避免出现高度塌陷的问题，但是一旦将父元素的高度写死，父元素的高度则无法自适应子元素的高度，所以这种方法我们不推荐使用。
方法二：
根据W3C的标准，在页面中都有一个隐藏属性叫做 Block Formatting context，简称BFC。该属性可以设置打开或关闭，默认是关闭的。
开启元素的BFC
- 设置元素浮动
- 将元素设置为绝对定位
- 将元素的display属性设置为inline-block
- 将元素的overflow属性设置一个非visible的值
但是在IE6及其以下的浏览器中并不支持BFC，所以使用这种方法并不能兼容IE6，在IE6中虽然没有BFC但是它有另外一个隐藏属性叫hasLayput，将元素的zoom值设置为1即可开启。
zoom表示放大的意思，后面跟着一个正整数，写几就是将元素放大几倍
zoom这个样式只在IE中支持，其他浏览器并不支持。
当元素开启BFC后将会有如下特性：
- 父元素的垂直外边距不会和子元素重叠
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素可以包含浮动元素
使用开启BFC的方式解决父元素高度塌陷时，我们一般采用将overflow的值设置为hidden，并且将zoom的值设置为1，此时就会存在一定的副作用，小编在这里就不列举其存在的副作用了，想了解的可以自己查看overflow属性。
方法三：
我们可以在出现高度塌陷父元素的子元素的最后面加上一个空白的div元素，并且设置其空白元素的相应属性（清除浮动）
我们在使用这种方法去解决高度塌陷时，也会存在一个问题，因为此时我们是在结构中新加了一个元素出来，而这个元素除了解决这个问题没有其他任何意义，还会在页面中添加多余的结构。
方法四：
我们除了在结构中添加新元素外还可以在css样式中来操作，我们利用after伪类选择器也可以解决父元素高度塌陷的问题。