BFC、margin合并与塌陷、高度塌陷

1.BFC

BFC（Block Formatting Context）叫做“块级格式化上下文”。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
触发BFC的条件：
① float ≠ none
② position ≠ static / relative
③ display : inline-block / table-cell / table - caption / flex / inline-flex
④ overflow ≠ visible

2.margin合并与塌陷

• margin合并与塌陷只在垂直方向发生，水平方向没有此说法

场景一：兄弟元素，垂直方向margin合并

解决：
1.直接改变其中一个的外边距，达到理想效果为止（推荐）
2.让两个兄弟元素不属于同一个BFC，给其中一个元素外面套一个div（不推荐）

div{ overflow: hidden; }

场景二：父子元素（此处的margin合并也叫做margin塌陷，塌陷是父子元素情况的特称）

    <div class="box1">
        <div class="son"></div>
    </div>

        .box1{
            margin-top: 100px;
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
        .son{
            margin-top: 100px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }

将son的margin-top设为200px，子元素和父元素一起距离顶部200px，子元素和父元素之间没有间距：

总结：取父子元素中margin-top较大的值，父子元素之间没有间距。
解决：触发父元素的BFC

3.高度塌陷

概念：父元素自适应（宽高由子元素撑开），子元素设置float为left或right，此时父元素的高度为0（看不见子元素的高度）。
解决：
① 给父元素设置固定的高度（不推荐，不灵活）
② 清除浮动（下面的abc方法）
a. 在子元素的末尾添加p标签

p { clear:both; }

b.设置父元素的伪元素

box1::after {
    content: "020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;	
}

c.父元素设置{ overflow:hidden; }