面试必备：掌握BFC解决布局问题的核心要点

ZhaiMou

于 2024-08-31 23:38:40 发布

阅读量618

点赞数 13

文章标签：面试 html css3 前端 javascript html5

本文链接：https://blog.csdn.net/weixin_63625059/article/details/141761033

版权

在这里插入图片描述

什么是FC呢

FC–Formatting Context 格式上下文
在w3c上说
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
正常流中的框属于格式设置上下文，该上下文可以是块或内联，但不能同时是两者。块级框参与块格式化上下文。内联级框参与内联格式上下文。

BFC 块级格式化上下文

BFC出现在哪里呢

在w3c中
块级元素的布局属于BlockFormattingContext（BFC）
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
浮动、绝对定位元素(absolutely,fiexed)、
不是块框的块容器(例如内联块、表单元格和表标题)
(block box=>不会创建BFC /inline-block =>创建BFC)以及 ‘overflow’ 不是 ‘visible’ 的块框（除非该值已传播到视口时）为其内容建立新的块格式上下文。
在mdn上
MDN上有整理出在哪些具体的情况下会创建BFC

文档的根元素（<html>）。
浮动元素（即 float 值不为 none 的元素）。
绝对定位元素（position 值为 absolute 或 fixed 的元素）。
行内块元素（display 值为 inline-block 的元素）。
表格单元格（display 值为 table-cell，HTML 表格单元格默认值）。
表格标题（display 值为 table-caption，HTML 表格标题默认值）。
匿名表格单元格元素（display 值为 table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或 inline-table）。
overflow 值不为 visible 或 clip 的块级元素。
display 值为 flow-root 的元素。
contain 值为 layout、content 或 paint 的元素。
弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。

bfc的特点

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
在块格式化上下文中，框一个接一个地垂直布局，从包含块的顶部开始。两个同级框之间的垂直距离由 ‘margin’ 属性决定。块格式化上下文中相邻块级框之间的垂直边距折叠。

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
在块格式化上下文中，每个框的左外边缘与包含块的左边缘相接触（对于从右到左的格式，右边缘接触）。即使在存在浮动（尽管框的_行框_可能会因浮动而缩小），除非框建立新的块格式上下文（在这种情况下，框本身_可能会因_浮点数而变得更窄）。

简单概况如下：

在BFC中，box会在垂直方向上一个着一个的排布

垂直方向的间距由margin属性决定；

在同一个BFC中相邻两个box之的margin会折叠 (collapse)

在BFC中每个元素的左边缘是紧着包含块的左边缘的

面试回答

针对BFC网上有特别多的说法但是都没有解释的很清楚，所以我是专门查过W3C或MDN文档的
在标准流中，我们所有的盒子，不管是块级盒子还是行内盒子，它们都属于某一个Fc（格式化上下文），块级盒子属于BFC（块级格式化上下文），行内级元素属于IFC（行内格式化上下文）。
BFC就是用来决定块级盒子是如何排布的
在BFC中，块级盒子是一个着一个在垂直方向排布的，垂直方向的间距由margin属性决定，并且在同一个BFC中，两个相邻的box之间margin会折叠。
这个就是BFC的官方解释

BFC的作用一解决折叠问题

在同一个BFC中，相邻两个box之间的margin会折叠(collapse)

官方文档明确的有说

The vertical distance between two sibling boxes is determined by the margin properties.Vertical margins between adjacentblock-level boxesin a block formatting context collapse
那么如果我们让两个box是不同的BFC呢？那么就可以解决折叠问题

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.box1 {

width: 100px;

height: 100px;

margin-bottom: 50px; /* 垂直外边距 */

background-color: lightcoral;

overflow: auto; /* 触发 BFC */

}

  

.box2 {

width: 100px;

height: 100px;

margin-top: 50px; /* 垂直外边距 */

background-color: lightblue;

}

  

.container {

overflow: auto; /* 触发 BFC */

}

</style>

</head>

<body>

<div class="box1">

<!-- Box 1 -->

</div>

<div class="container">

<div class="box2">

<!-- Box 2 -->

</div>

</div>

</body>

</html>

BFC作用二解决高度塌陷问题

网上有很多说法，BFC可以解决浮动高度塌陷，可以实现清除浮动的效果

但是从来没有给出过BFC可以解决高度塌陷的原理或者权威的文档说明

为什么可以解决浮动高度的陷问题，但是不能解决绝对定位元素的高度陷问题呢？事实上，BFC解决高度陷需要满足两个条件：

浮动元素的父元素触发BFC，形成独立的块级格式化上下文（BlockFormattingContext）；
浮动元素的父元素的高度是auto的；

你不设置元素高度，高度默认为auto
BFC的高度是auto的情况下，是如下方法计算高度的

如果只有inline-level，是行高的顶部和底部的距离
如果有block-level，是由最顶层的块上边缘和最底层块盒子的下边缘之间的距离
如果有绝对定位元素，将被忽略
如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .bfc-container {
            overflow: atuo; /* 触发 BFC */
            background-color: lightgray;
        }

        .float-box {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            margin: 10px;
        }

        .absolute-box {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            top: 20px; /* 离上边距 20px */
        }

        .normal-box {
            height: 100px; /* 设置一个高度以便比较 */
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <!-- 浮动元素导致高度塌陷 -->
    <div class="bfc-container">
        <div class="float-box"></div>
        <!-- 由于 BFC，容器高度会包含浮动元素的高度 -->
    </div>
    <div class="normal-box"></div>

    <!-- 绝对定位元素不会影响 BFC 高度 -->
    <div class="bfc-container">
        <div class="absolute-box"></div>
        <!-- 绝对定位的元素不会影响 BFC 高度 -->
    </div>
</body>
</html>

在这个示例中：

.bfc-container 通过 overflow: hidden; 触发了 BFC，确保浮动元素（.float-box）不会导致父容器高度塌陷。
绝对定位元素（.absolute-box）则不会影响 BFC 容器的高度，因为它们脱离了文档流。

面试问题回答

BFC在开发中主要可以用来解决两个问题：解决margin的折叠问题和解决浮动元素高度陷问题

解决margin的折叠问题是通过让两个垂直方向的盒子处于不同的BFC中,因为在同一个BFC会折叠，那么处于不同的BFC时就不会折叠了

解决浮动元素高度陷问题是源于一个盒子是BFC时，它高度的计算规则

当一个盒子是BFC并且高度设置为auto时，它会在计算高度时要求增加高度以包裹浮动元素的下边缘那么为了包裹浮动元素的下边缘增加了高度，就不会出现高度陷的问题了

本篇文章到这里就结束了，如果对你有所帮助，就点个关注吧

ZhaiMou

关注

13
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
面试必备：掌握BFC解决布局问题的核心要点

FC–Formatting Context 格式上下文在w3c上说context.context.正常流中的框属于格式设置上下文，该上下文可以是块或内联，但不能同时是两者。块级框参与块格式化上下文。内联级框参与内联格式上下文。
复制链接

扫一扫