BFC

块级格式化上下文,是一个独立的渲染区域,让BFC内部的元素与外部的元素相隔离,使内外的元素的定位不会相互影响。

触发条件

    根元素

    position:absolute/fixed

    display:inline-block/table

    float 元素

    overflow !== visible

规则:

    属于同一个BFC的两个相邻Box垂直排列

    属于同一个BFC的相邻Box的margin会发生重叠BFC高度

    BFC中子元素的margin box 的左边,与包含快(BFC)boeder box的左边相接触(子元素absolute除外)

    BFC区域不会与float的元素区区域重叠

    计算BFC高度时,浮动子元素也参与计算

    文字层不会被浮动层覆盖,环绕于周围

应用

    阻止margin重叠

    可以包含浮动元素-清除内部浮动(清除浮动原理是两个div都位于同一个BFC区域之中)

    自适应两栏布局

可以组织元素被浮动元素覆盖

你可能感兴趣的:(BFC)