高度塌陷解决方法和BFC

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

父元素没有设置高度（自适应子元素的高度），当子元素脱离文档流的时候（设置float属性或者设置positon为absolute或fixed时），就会造成父元素的高度塌陷问题。

解决方案：

1. 给父元素添加高度，违背初衷，不推荐。
2. 触发BFC

BFC（block formatting context）:块级格式化上下文。BFC有一个特性，计算其高度时，浮动元素也参与计算。BFC元素是一个独立的容器，容器里面的子元素不会影响到外面的元素。具体内容请参考这篇博客

 触发BFC的五种方法：
  1.根标签html就是一个bfc;
  2.float不为none,但是给父元素设置float，会引起布局发生改变。
  3.position为absolute或fixed
  4.overflow为非visible
  5.display 设置为table-cell、table-caption、flex、inline-block、inline-flex。

BFC的作用：
1.两个相邻box的margin会发生重叠，设置其中一个为BFC后可解决margin重叠的问题。
2. 清除浮动
3. bfc区域不会与float元素重叠

3. 给父元素添加 overflow：hidden。缺点是子元素定位到父元素外部时，会被隐藏。
4. 在最后浮动元素的位置后添加一个div标签，并设置属性：clean: both; overflow: hidden; height: 0;
   缺点：添加无意义的div，造成冗余。
5. 通过添加伪类::after

     .parent{
            border:10px solid blue;         
        }
        /* ::after对IE8以下有兼容问题，可以通过增加zoom: 1;声明来解决。 */
        .parent::after{
            content: " ";
            clear:both;
            /* height:0; */
            overflow: hidden;
            display: block;
            visibility: hidden;
        }
        .son{
            float: left;
            width: 200px;
            height: 50px;
            background-color: red;
        }