CSS:BFC(块级格式化上下文)和层叠上下文

糖醋草莓皮
887 阅读3分钟

文档流

  • 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。
  • 浮动 (float) 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
  • 绝对定位 (absolute positioning) 在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

BFC

BFC即块格式化上下文，属于普通流的一部分，有BFC特性的元素像是被隔离，和其他元素互不影响

开启BFC

  1. 根元素或包含根元素的元素
  2. float: left/right
  3. position: absolute/fixed
  4. overflow：hidden/auto(不为visible)
  5. 行内块元素（元素的 display 为 inline-block）
  6. 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  7. 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  8. 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
  9. display 值为 flow-root 的元素
  10. contain 值为 layout、content或 strict 的元素
  11. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
  12. 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
  13. 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  14. column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

应用

  • 不同BFC互不干扰
  • 浮动元素存在于最近的BFC

解决外边距折叠

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10</title>
    <style>
        .container {
         
        }

        .child {
            width: 100px;
            height: 100px;
            background: lightblue;
            margin: 100px;
        }
    </style>
</head>

<body>
    <div class='container'>
        <div class='child'></div>
    </div>
    <div class='container'>
        <div class='child'></div>
    </div>
</body>

</html>

由于两个child都在body这个BFC下，margin的上下会发生折叠，解决方法是将其放在两个不同的BFC下，即container的overflow设置为hidden（注意是container开启BFC,两个child才会在不同的BFC下，不是child开启）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10</title>
    <style>
        .container {
            overflow: hidden;
        }

        .child {
            width: 100px;
            height: 100px;
            background: lightblue;
            margin: 100px;
        }
    </style>
</head>

<body>
    <div class='container'>
        <div class='child'></div>
    </div>
    <div class='container'>
        <div class='child'></div>
    </div>
</body>

</html>

包含浮动元素(浮动元素撑开最近的BFC）

<!DOCTYPE html>
<html lang="en">

<body>
    <div id='1' style="border: 1px solid #000;">
        <div id='2' style="width: 100px;height:100px;background: rgb(114, 106, 106);float: left;">
        </div>
    </div>
    <div id='3' style='border:1px solid red; height:50px'></div>
</body>

</html>

2号div撑开了html，但是没有撑开一号div或者body

<!DOCTYPE html>
<html lang="en">

<body>
    <div id='1' style="border: 1px solid #000;overflow: hidden;">
        <div id='2' style="width: 100px;height:100px;background: rgb(114, 106, 106);float: left;">
        </div>
    </div>
    <div id='3' style='border:1px solid red; height:50px'></div>
</body>

</html>

2号div撑开了1号div，而一号div是普通流，所以没有导致坍塌。

ps： 如果2号div设置为绝对定位没有办法解决坍塌，因为浮动元素还存在于普通流，而绝对定位依旧脱离普通流了。

BFC 可以防止元素被浮动元素覆盖

<!DOCTYPE html>
<html lang="en">

<body>
    <div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
    <div style="width: 200px;background: #eee">我是一个没有设置浮动;</div>
    <div style='border: 1px solid red;height:20px'></div>
</body>

</html>


<!DOCTYPE html>
<html lang="en">

<body>
    <div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
    <div style="width: 200px;background: #eee; overflow: hidden;">我是一个设置浮动的;</div>
    <div style='border: 1px solid red;height:20px'></div>
</body>

</html>

层叠上下文

z-index大的元素一定在小的元素上面吗？

不一定，因为:
1. z-index的设置不一定生效 2. 上下的比较主要取决于层叠上下文，只有在同一层叠上下文中才会有大的覆盖小的

avatar
文章
阅读
粉丝