一文带你彻底弄懂BFC（块级格式上下文）

最新推荐文章于 2023-05-15 23:05:13 发布
最新推荐文章于 2023-05-15 23:05:13 发布
阅读量442 收藏 4
点赞数 2
分类专栏： 前端 文章标签： 定位 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41996454/article/details/108903784
版权

文章目录

先说说FC，FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染
区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC和IFC
都是常见的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。

BFC（Block Formatting Context）叫做“块级格式化上下文”。

BFC的布局规则

1.内部的盒子会在垂直方向，一个个地放置；

2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。垂直方向上的距离会叠加，值由最大margin值决定（如果不要叠加，就需要将该盒子变成一个独立的盒子）

3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

4.BFC的区域不会与float重叠；

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；

6.计算BFC的高度时，浮动元素也参与计算。

形成BFC的条件

  • 根元素（即body）；
  • 浮动元素，float的属性不为none；
  • 定位元素，position为absolute或fixed；
  • display为inline-block，table-cell，table-caption，flex；
  • overflow不为visible。（值为hidden/auto/scroll时）

BFC的作用

  • 解决margin重叠的问题（添加独立BFC）
  • 解决浮动高度塌陷的问题（在父级添加overflow:hidden）
  • 解决侵占浮动元素的问题（添加overflow:hidden清除浮动）

BFC特性详解

接下来我将用例子一一对其特性进行说明。

特性一

内部的盒子会在垂直方向，一个个地放置。

这个很好理解，body本身就是一个BFC，根据块级元素的定义，块级元素是会占满一整行的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        .container {
            width: 300px;
            border: 1px solid #000;

            /*触发BFC*/
            overflow: hidden;
            height: 400px;
        }

        .box1 {
            height: 20px;
            width: 50%;
            background-color: blue;
        }

        .box2 {
            height: 20px;
            width: 50%;
            background-color: yellow;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>


</div>
</body>
</html>

img






特性二

盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。垂直方向上的距离会叠加，值由最大margin值决定（如果不要叠加，就需要将该盒子变成一个独立的盒子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        .container {
            width: 300px;
            border: 1px solid #000;

            /*触发BFC*/
            overflow: hidden;
            height: 400px;
        }

        .box1{
            height: 20px;
            margin: 50px 0;
            background-color: blue;
        }

        .box2{
            height: 20px;
            margin: 60px 0;
            background-color: yellow;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

img

如果希望这两个盒子之间的margin不要重叠，则需要使其中一个盒子形成一个独立容器，即触发BFC。

这也是利用了BFC的第五个特性。

  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        .container {
            width: 300px;
            border: 1px solid #000;

            /*触发BFC*/
            overflow: hidden;
            height: 400px;
        }

        .wrapper {
            width: 100%;
            overflow: hidden;
            border: 2px solid purple;
        }

        .box1 {
            height: 20px;
            margin: 50px 0;
            background-color: blue;

        }

        .box2 {
            height: 20px;
            margin: 60px 0;
            background-color: yellow;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="box1"></div>
    <div class="wrapper">
        <div class="box2"></div>
    </div>


</div>
</body>
</html>

img










特性三

3、每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

第三点也很好理解，就拿body来说，文档流都是从左往右排版的。即使存在浮动元素，BFC中其他元素的margin box的左边也会与包含块border box的左边相接触 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            background: gray;
        }

        .left {
            /* 即使存在浮动元素，BFC中其他元素的margin box的左边也会与包含块border box的左边相接触 */
            /* 在这个例子中，黄框向左浮动，脱离了普通流，此时绿框被定位到包含块的左上角 */
            float: left;
            width: 100px;
            height: 80px;
            background: yellow;
            opacity: .5;
        }

        .right {
            width: 200px;
            height: 50px;
            background: green;
            opacity: .5;
        }
    </style>
</head>
<body>
<div class='box'>
    <div class="left"></div>
    <div class="right"></div>
</div>

</body>
</html>

img






特性四

BFC的区域不会与float重叠；

现有如下代码，左盒子设置成浮动，右边是普通的块级div。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        .box1 {
            /*浮动触发bfc*/
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
            text-align: right;
        }

        .box2 {
          
            width: 500px;
         
            height: 300px;
            background-color: yellow;
        }

    </style>
</head>
<body>

<div class="box1">右侧文字</div>
<div class="box2">左侧文字</div>

</body>
</html>

效果如图，左盒子由于被设置成向左浮动，触发了BFC，而右盒子未触发BFC，有部分区域被覆盖了。

img

现在将右盒子也触发BFC。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        .box1 {
            /*浮动触发bfc*/
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
            text-align: right;
        }

        .box2 {
            /*overflow触发bfc, 这里用float:left也行*/  
            overflow: hidden;
            width: 500px;
            height: 300px;
            background-color: yellow;
        }

    </style>
</head>
<body>

<div class="box1">右侧文字</div>
<div class="box2">左侧文字</div>

</body>
</html>

效果如下。

img






特性五

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        .container01 {
            /*触发父盒子bfc*/
            float: left;
            width: 600px;
            border: 2px solid black;
            /*    高度靠内容撑开*/
        }

        .container02{
            /*触发父盒子bfc*/
            float: left;
            width: 600px;
            border: 2px solid black;
        }

        .box1 {
            /*浮动触发bfc*/
            float: left;
            width: 1000px;
            height: 200px;
            background-color: blue;
        }
        .box2 {
            /*浮动触发bfc*/
            float: left;
            width: 1000px;
            height: 200px;
            background-color: yellow;
        }



    </style>
</head>
<body>
<div class="container01">
    <div class="box1">内容</div>
</div>
<div class="container02">
    <div class="box2">内容</div>
</div>

</body>
</html>

效果如图，左右盒子互不干涉。

img





特性六

计算BFC的高度时，浮动元素也参与计算。

这个就是常见的去浮动的原理，触发BFC，面试中经常会问到的。

现有如下代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        .container {
            width: 600px;
            border: 2px solid black;
            /*    高度靠内容撑开*/
        }

        .box1 {
            /*浮动触发bfc*/
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }


    </style>
</head>
<body>
<div class="container">
    <div class="box1">内容</div>
</div>

</body>
</html>

效果如下图,可以看到，由于子盒子的浮动，父盒子的高度未被子盒子撑开，因而塌陷了。

img

这时触发父元素形成BFC，就会将浮动元素的高度也计算入内了。

 .container {
            /*触发父盒子bfc*/
            overflow: hidden;
            width: 600px;
            border: 2px solid black;
            /*    高度靠内容撑开*/
}

img





BFC应用场景

自适应两栏布局

现有如下代码，想要实现一个自适应的两栏布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 300px;
        }

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

        .main {
            height:200px;
            background-color:red;
        }
    </style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>

效果如图。

img

现在想要将黑色区域和红色区域分开来，不允许有重叠。

因为body本身就是一个BFC，这满足了规范的第三条：

  • 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此。

所以如果我们需要将黑色区域撑到红色的左边，就需要利用规范的第四条：

  • BFC的区域不会与float重叠。

也就是说我们需要创造BFC区域。可以通过将红色区域的overflow设为hidden来触发BFC：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 300px;
        }

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

        .main {
            /*形成BFC*/
            overflow:hidden;

            height:200px;
            background-color:red;
        }
    </style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>

img






清除浮动

现有如下代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        .container {
            width: 600px;
            border: 2px solid black;
            /*    高度靠内容撑开*/
        }

        .box1 {
            /*浮动触发bfc*/
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }


    </style>
</head>
<body>
<div class="container">
    <div class="box1">内容</div>
</div>

</body>
</html>

效果如下图,可以看到，由于子盒子的浮动，父盒子的高度未被子盒子撑开，因而塌陷了。

img

这时触发父元素形成BFC，就会将浮动元素的高度也计算入内了。

 .container {
            /*触发父盒子bfc*/
            overflow: hidden;
            width: 600px;
            border: 2px solid black;
            /*    高度靠内容撑开*/
}

img

margin重叠

先定义两个垂直的div：

<div class="p"></div>
<div class="p"></div>

然后定义margin:

.p {
    width:200px;
    height:50px;
    margin:50px 0;
    background-color:red;
}

可以看到margin重叠后的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p {
            width: 200px;
            height: 50px;
            margin: 50px 0;
            background-color: red;
        }
    </style>
</head>

<body>
<div class="p"></div>
<div class="p"></div>
</body>
</html>

img

再看看BFC规范的第二条：

  • 盒子垂直方向的距离由margin决定，属于用一个BFC的两个相邻Box的上下margin会发生重叠。

说明两者属于同一个BFC，所以我们需要两个div不属于同一个BFC。
为第二个div套一个父亲div，然后将其overflow设为hidden来激活一个BFC就可以使margin不再重叠。

<div class="p"></div>
<div class="wrap">
	<div class="p"></div>
</div>

.wrap {
	overflow:hidden;
}

最终效果如下。

img

豆子前端
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
块级格式上下文(BFC)
qq_33911541的博客
05-31 271
块级格式上下文(BFC)
BFC机制
沭瑾
08-31 229
1、BFC BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 2、BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的m...
BFC块级格式化上下文
ct5211314的博客
03-20 443
1.一个BFC区域只包含其子元素，不包括其子元素的子元素。2.并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。3.不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。
BFC（块级格式化上下文）
小多的博客
05-28 925
BFC(Block formatting context) 直译为：块级格式化上下文 它是一个独立的渲染区域，只有块级盒子(Block-level box)参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干 元素的显示模式 我们前面讲过 元素的显示模式 display。 分为 块级元素 行内元素 行内块元素 ，其实它还有很多其他显示模式。 哪些元素会具有BFC的条件 不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block, list
BFC 块级格式化上下文
最新发布
汤姆猫的博客
05-15 454
BFC（块级格式化上下文）是CSS中重要的概念之一，它可以影响到元素布局和渲染。在本文中，我们将深入探讨BFC的相关知识，包括什么是BFC、BFC的触发条件、BFC的作用以及如何利用BFC解决一些常见的布局问题等。BFC全称为“块级格式化上下文”，它是一个独立的渲染区域，主要用于控制块元素的布局和浮动元素的影响。每个BFC都有自己的渲染规则，不会受到外部影响，并且内部元素也不会影响到外部元素。在上面的代码中，将容器元素设置为BFC，使用overflow属性来触发BFC。二、BFC的触发条件。
CSS理解块级格式上下文（BFC）
09-24
【CSS理解块级格式上下文（BFC）】 在CSS布局中，Block Formatting Context（BFC）是一个至关重要的概念，它决定了元素内部块级元素的布局方式，同时保证了这个区域与外部元素的布局互不影响。BFC可以看作是一个...
如何理解 CSS 布局和块级格式上下文
09-27
CSS布局和块级格式上下文（Block Formatting Context，简称BFC）是理解CSS布局机制的关键概念。BFC是一个独立的布局环境，它有自己的渲染规则，能够决定内部元素如何排列以及与外部元素如何交互。在CSS中，BFC主要...
CSS教程：彻底弄懂闭合浮动元素
12-01
`会让浏览器自动创建一个新的BFC（块格式化上下文），这样父元素就会包裹住所有的浮动子元素。`_height: 1%;`则确保在某些旧浏览器中父元素有一个最小高度，防止它塌陷。这种方法既保持了代码的简洁，又能有效地解决...
BFC(块级格式化上下文)
qq_52301431的博客
04-15 3676
目录 BFC(块级格式化上下文) （1）元素的显示模式 （2）哪些元素会生成BFC （3）BFC布局规则 （4）BFC的主要用途 1. 清除元素内部浮动 2. 解决外边合并问题 3.阻止元素被浮动元素覆盖 BFC(块级格式化上下文) BFC（Block formatting context） 直译为“块级格式化上下文”。 （1）元素的显示模式 我们之前学过元素的显示模式：display。 分为 块级元素、行内元素、行内块元素。其实，display还有很多值 .
BFC的形成与作用
weixin_30378311的博客
11-28 487
BFC是指Block Fromatting Context，即块级作用上下文。那么BFC是怎么产生的呢？ 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。w3c对BFC的定义看起来不是很易懂。...
BFC详解
weixin_47450807的博客
03-21 711
一、写在前面 今天看到一道面试题，主要是关于BFC的理解，下面将针对BFC的相关特性做出总结。 二、何为BFC BFC(Block Formatting Context)格式化上下文，是 web页面中盒子模型布局的CSS渲染模式，指的是一个独立 的渲染区域或者是一个隔离的独立容器。 三、形成BFC的条件 1、浮动元素，float除none以外。 2、定位元素，position(absolute, fixed) 3、display为以下其中之一的值：inline-block,table-cell,table
关于对CSS中BFC (块级格式化上下文) 的理解
yuliying的专栏
01-06 1961
转自: https://www.thinktxt.com/web-front/2017/02/18/css-bfc-layout-model.html 也许你已经掌握了HTML、CSS的基本布局技能，但是有可能还有一些难以琢磨透的专业名词还不是很清楚，比如BFC。今天我们就来聊聊对BFC的理解，以便我们在布局的过程中能够更加得心应手。 概念 BFC(Block Formatt
深入理解块级格式化上下文(BFC)
白日梦先生的博客
03-30 4190
一、 什么是BFC 块级格式化上下文，Block Formatting Context，也就是常说的BFC，它是Web页面的可视化CSS渲染区域的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 BFC的布局规则如下： 内部的盒子会在垂直方向，一个一个地放置 BFC是页面上的一个隔离的独立容器 属于同一个BFC的两个相邻Box的上下margin会发生重叠 计算...
块级格式化上下文（Block Formatting Context）
letterTiger的博客
02-05 1174
CSS块级格式化上下文是块级盒子的一种能力，这种能力并不是直接通过css属性声明而获得的，而是添加css的一部分相关属性之后自动获得的能力，也就是说没有一个明确的属性就是生成块级格式化上下文的。 块级格式化上下文的能力就是让具有该能力的盒子可以隔绝盒子内外的环境，盒子内部的布局不会影响到盒子外部，同样盒子外部也不会影响到盒子内部。 那么，没有格式化上下文的盒子怎么样才能被盒子外部影响或者说怎么...
BFC（块级格式上下文）
mingtian_mt的博客
08-13 102
BFC是指浏览器创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用 如何创建BFC？ 1，根元素 2，float属性不为none 3，position不为static 和 relative 4，overflow不为visible 5，display为inline-block, table-cell, table-caption, flex, inline-flex BFC作用？ 1）防止外边距重叠。 bfc导致的属于同一个bfc中的子元
bfc是什么_块级格式上下文（BFC）
weixin_39722070的博客
11-28 75
是什么：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文） w3c规范中的BFC定义BFC（Block formatting context）是一个作用区域。在该区域内浮动与其他元素交互，块盒进行布局...
BFC块级格式上下文
初漾的博客
08-29 411
BFC块级格式上下文，独立的一个渲染区域1、同一个BFC的两个相邻盒子间的margin会重叠（垂直方向）；2、BFC内部的盒子在垂直方向上会一个接一个的放置；3、每个子元素的左外边距与包含块的左边界相接触；4、计算BFC的高度时，浮动子元素也参与计算；5、BFC内部的子元素不会受到外面元素的影响；6、BFC的区域不会与float的元素区域重叠；触发BFC条件：float：不为none；overflo
如何创建块级格式化上下
05-13
块级格式化上下文（Block Formatting Context，BFC）是一个 Web 页面渲染的基本概念之一，它是一个独立的渲染区域，具有一定的布局规则，可以包含浮动元素，并且可以防止外部元素的影响。 要创建一个BFC，可以按照...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值