css高度塌陷问题

今天百度了一下网上关于解决高度塌陷的问题，也来做个汇总吧！

首先，应该解释一下什么是高度塌陷吧~，那么什么是高度塌陷呢？

如果父元素包含的子元素脱离了文档流，且没有设置高度，父元素的高度就会塌陷为零，这就是所谓的高度塌陷了~高度塌陷会有什么危害吗？有啊！如果没解决的话，布局就乱了啊~

那么有什么好方法可以解决高度塌陷吗？

方法一：通过开启元素的BFC属性

（先解释一下什么是bfc吧，在w3c中每个元素都有一个隐藏的bfc【Block Formating Context，块级格式上下文】属性，默认为关闭）

开启BFC属性后元素的特性：

1.元素的垂直外边距不会和子元素的重合

2.开启BFC的元素不会被浮动的元素所覆盖

3.开启BFC的元素可以包含浮动的子元素

开启BFC的方法：1）设置该元素overflow属性为除去visible的属性值

                              2）设置元素的float

                              3）将元素设置为决对定位

                              4）将元素的display属性设置为:inline-block

方法二：增加一个div元素，通过清除浮动

方法三：通过:after伪类来解决，注意加上content:""的属性。