高度塌陷的原因及解决方式

高度塌陷的原因：

        当父元素没有添加高度（高度自适应），而子元素又脱离文档流的时候（当子元素设置了浮动或者子元素的position属性值为absolute或是fixed，都会脱离文档流），就会发生高度塌陷。

高度塌陷的几种解决方案：

         1、给父元素一个固定的高度
                缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，当不知道父元素的具体高度时没办法设置，不推荐使用。

         2、给父元素添加属性：overflow：hidden
                缺点：当子元素定位到父元素外的时候，不希望溢出部分隐藏，此方法不适合使用。

         3、在最后一个浮动的元素后面添加一个空的div并给该元素添加属性：        clear:both;height:0;overflow：hidden
                缺点：在页面中添加无意义的div，形成冗余代码。

         4、万能清除浮动法： 在父元素中内容的最后添加一个伪元素来实现

父元素选择符:after{content:".";clear:both;height:0;overflow:hidden;display:block;visibility:hidden;}
                最合适的方法推荐使用