前端自学-高度坍塌出现的场景及解决方法

高度坍塌出现的场景：
当子元素有浮动，父元素没有高度的时候，父元素会出现高度坍塌
注：浮动的子元素不会撑开父元素的 height 或者是min-height。
解决高度坍塌的方法：
1：给出现高度塌陷的元素添加：overflow:hidden;

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

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


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

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

    3：万能清除法：
        .clear_fix:after{
            content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
        }
        .clear_fix{
            zoom:1;
        }  

高度自适应第二种情况：让子元素高度随着父元素高度进行改变。

    需求：让一个元素在浏览器窗口完全铺满：
      前提条件：
            body,html{
                height:100%;
                    }