BFC

BFC

BFC:块级格式化上下文，可以理解为是一个特殊的容器

规则:

        1:是嵌套关系下用，子元素为块级元素才会遵循这些规则
        2: 垂直排列
        3:同属于同一个BFC中的子元素,垂直方向的外边距相遇会重合
        4: 子元素的margin-left挨着父元素的border-left
        5: BFC不会与浮动元素重合
        6:BFC是一个独立的容器，里面的子元素不会影响外面的元素
        7:计算BFC高度时,浮动子元素参与高度计算

触发方式:

    1:根元素(html)
    2:浮动不为none
    3: position为 absolute fixed
    4:display为inline-block table-cell table-caption flex inline-flex
    5: overflow不为visible

BFC应用:

    解决垂直外边距相遇会重合的问题
    两列布局
    解决高度塌陷(父元素未设置高度，子元素进行了浮动)