块级格式化上下文（BFC）

最新推荐文章于 2024-12-30 15:36:30 发布

原创最新推荐文章于 2024-12-30 15:36:30 发布 · 312 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#BFC #块级格式化上下文

HTML和css 专栏收录该内容

4 篇文章

订阅专栏

本文深入解析BFC（Block Formatting Context）的概念，包括其触发条件、特性及作用，如阻止外边距折叠、包含浮动元素和避免被浮动元素覆盖，通过实例展示如何在CSS布局中有效利用BFC。

最近遇到一个专业的名词，不是很懂，所以了解了一下，并总结归纳一下。首先清楚我们的问题是什么？

BFC是什么？怎么创建？什么情况下创建？有什么特性和作用？

BFC是什么？

BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

如何触发BFC？

1，浮动元素，float 除 none 以外的值

2，绝对定位元素，position 的absolute，fixed（CSS3新增触发条件）值

3，display 为以下其中之一的值 inline-blocks，table-cells，table-captions（CSS3新增触发条件）

但是，"display:table" 本身并不产生 BFC，而是由它产生匿名框，匿名框中包含 "display:table-cell" 的框会产 BFC。总之，对于 "display:table" 的元素，产生 BFC 的是匿名框而不是 "display:table"。

4，overflow 除了 visible 以外的值（hidden，auto，scroll）

在 CSS3 中，BFC 叫做 Flow Root。

值得注意的是，BFC 并不是元素，而是某些元素带有的一些属性，因此，是上面这些元素产生了 BFC ，而它们本身并不是 BFC ，这个概念需要区分清楚。

特性

1，BFC 会阻止外边距折叠

两个相连的 div 在垂直上的外边距会发生叠加；外边距折叠的规则：仅当两个块级元素相邻并且在同一个块级格式化上下文时，它们垂直方向之间的外边距才会叠加；所以说，即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。因此，阻止外边距折叠只需产生新的 BFC 。

例子：三个 div 各包含一个 p 元素，三个 div 及其包含的 p 元素都有顶部和底部的外边距。但只有第三个 div 的边距没有与它的子元素 p 的外边距折叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: red;
            width: 500px;
            margin-top: 50px;
            margin-bottom: 50px;
        }
        div {
            background-color: yellow;
            margin-top: 50px;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
<div><p>第一段</p></div>
<div><p>第二段</p></div>
<div><p style="display: inline-block">第三段</p></div> //添加了display：inline-block属性，具有BFC属性
</body>
</html>

2，BFC 可以包含浮动的元素

有两个 div ，它们各包含一个设置了浮动的 p 元素，但第一个 div 出现了“高度塌陷”，这是因为内部的浮动元素脱离了普通流，因此该 div 相当于一个空标签，没有高度和宽度，即高度为 0 ，上下边框也重叠在一起。而第二个 div 使用 overflow: hidden 触发了 BFC ，可以包含浮动元素，因此能正确表现出高度，其边框位置也正常了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: red;
            float: right;
        }
        div {
            background-color: yellow;
            margin-bottom: 50px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div><p>第一段</p></div>
<div style="overflow: hidden "><p >第二段</p></div>
</body>
</html>

3，BFC 可以阻止元素被浮动元素覆盖

蓝色背景的 div 使用 overflow: hidden 触发了 BFC ，它并不会被它的兄弟浮动元素覆盖，而是处于它的旁边。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: blue;
            width: 300px;
        }
        div {
            border: 1px solid #ccc;
        }
        .blue {
            background-color: yellow;
            width: 200px;
            float: left;
        }
    </style>
</head>
<body>
<div><p class="blue">第一段</p><p>第一段2</p></div>
<div><p class="blue">第二段</p><p  style="overflow: hidden">第二段2</p></div>
</body>
</html>

以后可能还会有补充。

参考文章