HTML脱离文档流后高度塌陷的解决办法

1、开启父元素的BFC
    Block Formating Context 块级格式化环境
    开启BFC后元素具有的特性：父元素的垂直外边距不会与子元素重叠，开启BFC的元素不会被浮动元素所覆盖但可以包含浮动子元素；
    开启方式：设置元素浮动/设置元素绝对定位/设置元素的类型为inline-block/设置overflow非默认值，如

overflow:hidden

2、在塌陷父元素的最后加一个空白的div,然后对该div清除浮动

<div style:"clear:both"></div>

3、在浮动元素的父元素上添加伪类
   

.clearfix:: after {
     content: "";
     display: block;
     clear: both;    
}

4、子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
 

.clearfix:: before {
.clearfix:: after {
     content: "";
     display: table
     clear: both;    
}