高度塌陷出现的场景及解决方法

一、高度塌陷出现的场景：
当子元素有浮动，父元素没有高度的时候，父元素会出现高度塌陷
注：浮动的子元素不会撑开父元素的 height 或者是 min-height。

二、解决高度塌陷的方法：
1：给出现高度塌陷的元素添加：overflow:hidden;

        原理：overflow:hidden;触发了一个 BFC(布局逻辑)
            BFC规定：计算BFC高度时候，浮动元素也参与计算。

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

    2：在浮动元素的下方（同级）添加一个空的div，给div设置样式
        div{clear:both;}
        原理：添加的空div添加了clear：both;忽略上方同级添加浮动的元素留出的空间

。在父元素最底下显示，撑开父元素高度。

添加clear:both; 当前元素会忽略上方添加浮动的元素 留出来的空间。
    (称为 闭合浮动)
clear的属性值：
    	clear:left
    	clear:right
    	clear:both
        弊端：形成代码的冗余（出现高度塌陷，反复添加空div）

    3：万能清除法：
        .clear_fix::after{
            content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;（隐藏元素，占据空间，在页面上留下一片空白）
        }
    .clear_fix{  （加这个是用于兼容ie浏览器的）
            zoom:1;
        }