CSS3(BFC)

于 2025-05-12 21:18:59 发布
阅读量1.5k 收藏 12
点赞数 21
CC 4.0 BY-SA版权
分类专栏： 前端基础(css+html) 文章标签： css3 microsoft 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36260963/article/details/147905130

CSS3(BFC)

1、什么是BFC

  • W3C 上对 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.
    译文：浮动、绝对定位元素、不是块盒子的块容器（如 inline-blocks 、 table-cells 和
    table-captions ），以及 overflow 属性的值除 visible 以外的块盒，将为其内容建立新
    的块格式化上下文。

  • MDN 上对 BFC 的描述：

    块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，
    是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

  • 通俗描述

    1. BFC 是 Block Formatting Context （块级格式上下文），可以理解成元素的一个
      “特异功能”。 @media screen and (max-width:768px) { /*CSS-Code;*/ } @media screen and (min-width:768px) and (max-width:1200px) { /*CSS-Code;*/ }
    2. 该 “特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功
      能”被激活。
    3. 所谓激活“特异功能”，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。

2、开启了BFC能解决什么问题

  1. 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
  2. 元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
  3. 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

3、如何开启BFC

  • 根元素
  • 浮动元素
  • 绝对定位、固定定位的元素
  • 行内块元素
  • 表格单元格： table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
  • overflow 的值不为 visible 的块元素
  • 伸缩项目
  • 多列容器
  • column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
  • display 的值，设置为 flow-root

4、如何解决问题1

问题点：元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。

塌陷的问题实际上就是

  • 最上边一个元素的 margin-top 会被父元素吃掉，导致没有生效
  • 最下边一个元素的 margin-button 元素不起作用

问题演示

我将会将原本没有处理的效果贴出来，以及处理后的的效果贴出来；

代码
  .outer {
       width: 500px;
       background-color: #888;
}

.inner {
       width: 100px;
       height: 100px;
       text-align: center;
       line-height: 100px;

       /* 第一个元素和最后一个元素的 margin-top / margin-bottom失效了  */
       margin: 20px;

     }


     .inner:nth-of-type(1) {
       background-color: red;
     }

     .inner:nth-of-type(2) {
       background-color: yellow;
     }

     .inner:nth-of-type(3) {
       background-color: green;
     }

 <div class="outer">
      <div class="inner">1</div>
      <div class="inner">2</div>
      <div class="inner">3</div>
   </div>
效果

在这里插入图片描述

解决方案

我们遵循的方案是，谁有问题我们就在谁的身上处理它。如果我们是 a元素出了问题，那么我们处理方案也是在a元素上；

方案1

/* 方案1 浮动 */

​ float: left;

在这里插入图片描述

方案2

/* 方案2 absolute/fixed 相对定位是不行的 */

​ position: fixed;

在这里插入图片描述

方案3

后续的效果我就不一一贴出来了，直接看代码结果即可

  • 行内块元素

/* 方案3 行内块元素 */

display: inline-block;

方案4

行内块元素

/* 方案4 行内块元素 */

display: table;

方案5

方案5 overflow 的值不为 visible 的块元素

overflow: auto;

方案6

伸缩容器,找到他们的父亲 也就是 body {display: flex;}

body {display: flex;}

方案7

多列容器

column-count: 1;

方案8

column-span 为 all 的元素（即使该元素没有包裹在多列容器中）

column-span: all;

方案9

display 的值，设置为 flow-root

display: flow-root;

5、如何解决问题2

实际是浮动产生的问题，自己浮动后，后边的元素会填充到自己原本的位置，导致后面的元素被覆盖

问题演示

在这里插入图片描述

代码
 .box {
 width: 200px;
 height: 200px;

}

.box1 {
background-color: red;
/* 后面元素会跑到自己后面，影响的是后面元素 */
float: left;

}

.box2 {
         background-color: saddlebrown;
}         
      
<body>
   <div class="box box1">1</div>
   <div class="box box2">2</div>
</body>
  • 问题点：我们看到当box1设置浮动后，box2看不到了；

解决方案

这个时候我们看到出问题的是 box2元素，那么我们处理时候也需要在box2上面做文章

方案1

使用浮动

float: left;

在这里插入图片描述

方案2

使用定位，我们看到也有问题，就是box2把原本的box1给覆盖了；

position: absolute;

在这里插入图片描述

方案3

变为行内块元素

display: inline-block;

在这里插入图片描述

方案4

display: table

方案5

overflow: auto

方案6

body {

​ display: flex;

}

方案7

column-count: 1;

方案8

column-span: all;

方案9

display: flow-root;

6、如何解决问题3

  • 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

  • 我们如何设置

    我们需要设置一个父容器，父容器里面设置多个子元素，父容器的高度靠子元素的高度撑开，这个时候我们设置子元素浮动，然后看到父元素高度没了

基本代码

<title>02.浮动自己</title>
   <style>
       /* body {
      display: flex;
     } */

     .outer {
         background-color: #888;
         /* 需要设置宽度，不然看不到结果 */
         width: 800px;
         /* 解决方案 */
          /* float: left; */

          /* position: absolute; */
          /* display: inline-block; */
          /* display: table; */
          /* overflow: auto; */
          /* 父元素 */
          /* column-count: 1; */
          /* column-span: all; */
          display: flow-root;

     }

     .inner {
       width: 200px;
       height: 200px;
       text-align: center;
       line-height: 100px;
       
       /* 浮动，父元素高度没了 */
       float: left;

     }


     .inner:nth-of-type(1) {
       background-color: red;
     }

     .inner:nth-of-type(2) {
       background-color: yellow;
     }

     .inner:nth-of-type(3) {
       background-color: green;
     }
   </style>
</head>
<body>
   <div class="outer">
      <div class="inner">1</div>
      <div class="inner">2</div>
      <div class="inner">3</div>
   </div>
</body>

效果

在这里插入图片描述

解决后的效果

在这里插入图片描述

解决多种方案集合

.outer {
         background-color: #888;
         /* 需要设置宽度，不然看不到结果 */
         width: 800px;
         /* 解决方案 */
          float: left;

          /* position: absolute; */
          /* display: inline-block; */
          /* display: table; */
          /* overflow: auto; */
          /* 父元素 */
          /* column-count: 1; */
          /* column-span: all; */
          /* display: flow-root; */

     }
BFC理解及运用BFC解决css bug
Msinwln的博客
06-13 1951
BFC理解及运用BFC解决css bug Block Formatting Context (“块级格式化上下文”) 的缩写即为 BFC BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 每个盒子（块盒与行盒）的margin
【CSS面试题】BFC
weixin_63681863的博客
03-02 758
BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。
CSS3BFC
qq_43750656的博客
12-04 272
BFC为元素的隐含属性，开启了BFC的元素有一下特点 不会被浮动的元素覆盖 开启BFC的元素子元素和父元素的外边距不会重叠 开启BFC的元素会包含住浮动的子元素 如何开启BFC float 将元素设置为行内块元素 将元素的overflow设置为非visiable ...
【css3】BFC
逆风飞翔的代码狗
07-23 153
BFC 1. 定义： BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域， 只有 Block-level box 参与，它规定了内部的Block-level Box 如何布局，并且与这个区域 外部毫不相干。 布局规则： ​ A. 内部的Box 会在垂直方向，一个接一个地放置。 ​ B. Box垂直方向的距离由 margin决定。属于同一个 BFC的两个相邻 Box的 margin 会发 生重叠。 ​ C. 每个元素的 margin box 的左边
CSS3 之 BFC
qq_53165476的博客
06-09 139
【代码】CSS3 之 BFC。
css3---BFC讲解
WEB__QuShiLong的博客
09-10 282
【前言】今天给大家分享一下 常见格式化上下文 【内容】常见格式化上下文FC --Formatting Context 常见格式化上下文分为一下几类： ①BFC—Block Formatting Context—块级格式化上下文 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与。 会生成BFC的元素 ...
10分钟理解CSS BFC原理及其应用
09-27
CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...
前端CSS：BFC和浏览器差异
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-24 862
块格式化上下文（BFC）是指在页面布局中，某些元素会形成一个独立的渲染区域，在这个区域内，元素的布局遵循特定的规则。BFC主要用于解决布局中的常见问题，如元素的浮动问题、高度塌陷问题等。
【CSS】深入理解：BFC究竟是什么?
kakaai77的博客
04-20 1062
常见的形成BFC的场景根元素（html,:root）浮动元素（float属性部位none）绝对定位元素（absolute或fixed）行内快元素（display为inline-block）表格单元格（元素的display为table-cell(默认)）表格标题（display为table-caption）
CSS布局基础BFC
01-21
但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局 BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素...
CSS3之 BFC IFC GFC和FFC
Alive_tree的博客
06-04 369
What’s FC？ 一定不是KFC，FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？ float的值不
CSS3 总结（二十一）——BFC
qq_42188457的博客
03-16 182
BFC Block formatting content直译为（块级格式化上下文）。他是一个独立的区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干（就是BFC盒子里面怎么布局都不影响外面的布局，个人觉得这个就是以前所学知识的一个综合，感觉有点废话，可能是我前面学习时接触过一些该知识点的缘故吧）。 注意：不是所有元素模式都能产生BFC，产生BFC需要满足下面条件 ...
CSS什么是BFC?
m0_46670872的博客
06-15 199
块级格式化上下文。 作用：用来解决盒子边距重叠解问题。 BFC基本概念： BFC 是 CSS 布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素 不会影响到外部的元素 。 父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。注意display：inline-block 会出现空格 ...
CSS中的BFC
橙煦媛的博客
04-06 340
1.BFC是什么BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。2.BFC布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin bo
CSS中的BFC详解：定义、触发方式及应用场景
weixin_43312391的博客
09-07 382
BFC就是一个css的一个布局概念，是一个独立的区域，是一个环境。Block Formatting Context：块级格式化上下文。W3C的官方解释：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。BFC的目的：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。
【无标题】
2301_79989945的博客
11-26 71
居中：盒子在其包含块中居中设置为该属性的盒子，本质上还是一个块盒,但同时会附带另一个盒子，元素本身生成的盒子叫主盒子，附带的盒子叫次盒子（就是列表元素前面的那个点的盒子），次盒子和主盒子水平排列，先排次再排主，且无法调整两者见的距离涉及的css属性ul中 list-style-type设置次盒子中内容的类型设置次盒子相对于主盒子的位置速写属性 list-style 清空次盒子 - none。
CSS3学习（八）：高度塌陷与BFC
激洪的博客
03-13 696
CSS之高度塌陷、BFC、clearfix
BFC，IFC，GFC，FFC的定义及功能
weixin_30627341的博客
11-24 550
What's FC？一定不是KFC，FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFCBFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上...
css bfc
最新发布
05-04
### CSS BFC 的定义 BFC（Block Formatting Context，块级格式化上下文）是CSS中一种重要的布局机制。它是一种独立的渲染区域，在这个区域内，所有的子元素都会遵循特定的布局规则，并且这些子元素不会受到外部元素的影响[^1]。 --- ### BFC 的作用 #### 1. 防止布局干扰 BFC 形成一个完全独立的空间，使得其内部的子元素不会影响到外部的其他元素布局。这种特性对于复杂的页面结构尤为重要[^3]。 #### 2. 清除浮动引发的高度坍塌问题 当父元素包含浮动子元素时，默认情况下父元素可能会因为无法感知子元素的高度而发生高度坍塌现象。通过触发 BFC，可以让父元素重新计算并包裹住浮动子元素，从而避免这一问题[^3]。 #### 3. 解决边距重叠问题 在标准流中，相邻的两个块级元素之间的垂直外边距会发生重叠。如果其中一个元素进入了 BFC，则它们之间不会再有边距重叠的现象[^1]。 --- ### 如何触发 BFC？ 以下是几种常见的触发 BFC 的方法： - 设置 `float` 属性值为非 `none` 值（如 `left` 或 `right`）。 - 将 `position` 属性设置为 `absolute` 或 `fixed`。 - 把 `overflow` 属性设为除了 `visible` 外的任何值（如 `hidden`, `auto`, 或 `scroll`）。 - 使用某些特殊的 `display` 值，比如 `inline-block`, `flex`, `grid`, `table-cell`, `list-item`, 或者现代浏览器支持的 `flow-root` 等[^2][^3]。 --- ### BFC 的典型应用场景 #### 场景一：清除浮动带来的父元素高度丢失 ```html <div class="parent"> <div class="child">Child</div> </div> <style> .parent { overflow: hidden; /* 触发 BFC */ } .child { float: left; } </style> ``` 在这个例子中，`.parent` 虽然包含了 `.child` 浮动元素，但由于设置了 `overflow:hidden` 来触 发 BFC，因此能够正常显示自身的高度。 #### 场景二：防止兄弟元素间的 margin 合并 ```css .block1 { height: 50px; background-color: lightblue; margin-bottom: 20px; } .block2 { height: 50px; background-color: salmon; margin-top: 20px; overflow: auto; /* 触发 BFC */ } ``` 这里由于第二个区块启用了 BFC，所以两者的顶部间距会保持实际相加后的距离而不是简单合并[^1]。 --- ### 总结 掌握 BFC 不仅能帮助开发者更好地理解和调试复杂网页布局行为，还能有效应对诸如清除浮动、调整内外边界等问题。合理利用 BFC 可显著提升前端开发效率与代码质量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星空寻流年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值