开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

高度塌陷

高度塌陷出现的场景

     当子元素有浮动，父元素没有设置高度时，（子元素撑不开父元素高度时），父元素就会出现高度塌陷

解决高度塌陷的方法：

    1.给出现高度塌陷的元素添加overflow：hidden
    原理：因为将overflow属性设置为hidden触发了BFC
    因为BFC规定计算BFC元素高度时，里面浮动元素也参与计算

    弊端：会隐藏掉定位到区域外的元素

    2.在浮动元素的下方，添加同级元素空div。并且给空div添加样式clear：both；
    原理：忽略了上方浮动元素带来的预留空间

    弊端：写了大量的空div 造成项目代码冗余

    3：万能清除法：
        出现高度塌陷的元素：after{
            content:""; 添加一个元素
            display:block;  转为行内块
            height:0;      将高度设置为0
            clear:both;   忽略浮动带来的预留空间
            overflow:hidden; 溢出部分隐藏
            visibility:hidden; 使元素不可见，但占用空间
        }

BFC

    BFC又称"块级格式化上下文"
    作用：规定了某些布局逻辑
    条件：不是所有块级元素都是bfc，要形成BFc的触发条件

布局规则

    一、内部的box会在垂直方向，一个一个排列
    二、box垂直方向的距离由margin决定，属于同一个bfc两个相邻的元素之前的margin值会出现重叠（按照最大值设置）
    三、计算bfc的高度时，浮动的元素也要参与计算
    四、bfc是页面上一个独立的隔离容器，里面的元素不会影响到外面的元素
    五、BFC的区域不会与float box重叠
    六、每个元素的margin box的左边，与包含块的border box的左边相接触

触发BFC的条件

    在根元素中（html）
    设置float属性不为none
    设置position为absolute或fixed
    display为inline-block,table-cell,table-caption,flex,inline-flex
    overflow不为visible