理解BFC

2023-12-18 本文已影响0人扫地僧练级

定义

BFC(Block formatting context)直译为"块级格式化上下文"。是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干

布局规则

内部的 Box 会在垂直方向一个一个的放置
Box 垂直方向的距离由 margin 决定, 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
每个元素的 margin 左边与包含块 border box 的左边相接触, 即使存在浮动
BFC 区域不会与 float box 重叠
一个独立的隔离容器, 容器里面的子元素不会影响到外面的元素, 外面的也不会影响到里面的
计算 BFC 告高度, 浮动元素也计算

触发 BFC

根元素
float 不为 none
position 是 absolute 货 fixed
display 是 inline-block 或 table-cell 或 table-caption 或 inline-flex
overflow 不是 visible

示例一: 防止垂直 margin 重叠

<style>
    p {
    color: #f66;
    background: #fcc;
    width: 200px;
    line-height: 100px;
    text-align: center;
    margin: 40px;
    }
    .parent {
    overflow: hidden;
    }
</style>
<body>
    <p>AAA</p>
    <div class="parent">
        <p>BBB</p>
    </div>
</body>

布局规则第二条: Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠

示例二: 清除内部浮动

<style>
    .parent {
        overflow: hidden;
        width: 200px;
    }
    .child {
        width: 100px;
        height: 100px;
        float: left
    }
</style>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

布局规则第六条:计算 BFC 的高度时，浮动元素也参与计算

示例三: float 两栏布局

<style>
    body {
        width: 300px;
        position: relative;
    }

    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }

    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

布局规则第四条:BFC 的区域不会与 float box 重叠。