高度塌陷

一、高度塌陷出现的场景：

　　①当子元素有浮动，父元素没有高度的时候，父元素会出现高度塌陷；

　　②注：浮动的子元素不会撑开父元素的 height 或者是 min-height。

二、解决高度塌陷的方法：

1：给出现高度塌陷的元素添加：overflow:hidden;

    ①原理：overflow:hidden;触发了一个 BFC(布局逻辑)

    ②BFC规定：计算BFC高度时候，浮动元素也参与计算。

    ③弊端：隐藏掉定位在当前元素外围的内容。

 2：在浮动元素的下方（同级）添加一个空的div，给div设置样式

    ① div{clear:both;}

    ② 原理：添加的空div添加了clear：both;忽略上方同级添加浮动的元素留出的空间。在父元素最底下显示，撑开父元素高度。

    ③弊端：形成代码的冗余（出现高度塌陷，添加一个div）

 3：万能清除法：

    ①选择符:after{

                content:".";

                clear:both;

                display:block;

                height:0;

                overflow:hidden;

                visibility:hidden;

            }

      ②选择符{

                zoom:1;

            }（IE浏览器）