BFC — 张天禹

已于 2023-12-16 16:25:39 修改
阅读量80 收藏
点赞数
分类专栏： 前端学习 文章标签： 学习
于 2023-12-16 14:43:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16992475/article/details/135032559
版权
本文介绍了BFC（BlockFormattingContext）的概念，解释了它如何解决元素间的margin塌陷、浮动元素覆盖和父元素高度塌陷等问题。通过示例演示了如何通过浮动、绝对定位、display属性等方法开启BFC，并展示了在实际布局中的应用场景。
摘要由CSDN通过智能技术生成

文章目录

学习链接

什么是BFC？看这一篇就够了

BFC

1. 什么是BFC

W3C 上对 BFC 的定义

原文：Floats, absolutely positioned elements, block containers (such as inline-blocks, tablecells, 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 （块级格式上下文），可以理解成元素的一个“特异功能”。

  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

演示

演示1

子元素margin塌陷问题

  • outer仅设置宽度
  • inner设置宽度和高度，以及margin
  • 可以看到子元素把父元素给拉下来了，最后1个子元素的margin-bottom也给父元素剥夺了

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_BFC_演示1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        /* outer仅设置宽度 */
        .outer {
            width: 400px;
            background-color: #888;
           
        }
        
        /* inner设置宽度和高度，以及margin */
        .inner {
            width: 100px;
            height: 100px;
            margin: 20px;
        }
        
        .inner1 {
            background-color: orange;
        }
        
        .inner2 {
            background-color: green;
        }
        
        .inner3 {
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
        <div class="inner inner3"></div>
    </div>
    <hr style="height: 50px; background-color: red;">
</body>
</html>

使用BFC解决问题

  • 使用以下任意方式都能解决问题
  • 其中，伸缩项目是通过设置body为flex，则body的直接子元素变成伸缩项目了
  • display设置为flow-root;是新定义出来的属性值
  • overflow设置只要不为visible，包括auto都可以开启BFC

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_BFC_演示1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            /* display: flex; */
        }
        .outer {
            width: 400px;
            background-color: #888;
            float: left; 
            /* position: absolute; */
            /* display: inline-block; */
            /* display: table; */
            /* overflow: auto; */
            /* column-count: 1; */
            /* display: flow-root; */
        }
        .inner {
            width: 100px;
            height: 100px;
            margin: 20px;
        }
        .inner1 {
            background-color: orange;
        }
        .inner2 {
            background-color: green;
        }
        .inner3 {
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
        <div class="inner inner3"></div>
    </div>
    <hr style="height: 50px; background-color: red;">
</body>
</html>

完美解决塌陷问题

  • 注意：给outer设置border，也能解决父子元素垂直外边距塌陷的问题，但这并没有开启BFC。并且设置border相当于改了盒子尺寸了，这是个副作用，其实就相当于让父子元素外边距不相邻了
  • 其实，不用上面的BFC也能完美解决这个问题，效果如下：

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_BFC_演示1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .outer {
            width: 400px;
            background-color: #888;
            
        }

		/* 既能解决父子元素相邻外边距问题，
		   又能解决子元素浮动造成父元素高度的塌陷问题 */
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }


        .inner {
            width: 100px;
            height: 100px;
            margin: 20px;
        }
        .inner1 {
            background-color: orange;
        }
        .inner2 {
            background-color: green;
        }
        .inner3 {
            background-color: deepskyblue;
        }
    </style>
</head>
<body>

    <div class="outer clearfix">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
        <div class="inner inner3"></div>
    </div>
    
    <hr style="height: 50px; background-color: red;">
</body>
</html>

演示2

被浮动元素覆盖问题

  • box1浮动起来，这样，自然box2就顶山去了，但是box1盖在了box2的上面，这样就是1个问题了
    在这里插入图片描述
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_BFC_演示2</title>
    <style>
    
        body {
            margin: 0;
        }
        .outer {
            border: 2px solid red;
        }
        
        .box1 {
            width: 100px;
            height: 100px;
            background-color: orange;
            float: left;
        }
        
        .box2 {
            width: 120px;
            height: 120px;
            background-color: green;
            
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

使用BFC解决问题

例1
  • 让box2也浮动起来，这样box1就盖不到box2（纳闷：这不就2个浮动的么，开啥BFC），反正box2是通过浮动开启了BFC，box1就休想盖到box2上面，这也符合BFC解决问题的范畴
    在这里插入图片描述
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_BFC_演示2</title>
    <style>
        body {
            margin: 0;
        }
        .outer {
            border: 2px solid red;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: orange;
            float: left;
        }
        .box2 {
            width: 120px;
            height: 120px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>
例2
  • box2直接设置绝对定位，box1确实无法盖住box2，因为box2已经把box1给盖住了
    在这里插入图片描述
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_BFC_演示2</title>
    <style>
        body {
            margin: 0;
        }
        .outer {
            border: 2px solid red;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: orange;
            float: left;
        }
        .box2 {
            width: 120px;
            height: 120px;
            background-color: green;
            
            position: absolute;
            opacity: 0.6;
           
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>
例3
  • 现在给box2设置inline-block，由于box2开启了BFC，那么box1就无法盖住box2（浮动本来就是用来作文字环绕的），但是下面有1个小缝
    在这里插入图片描述
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_BFC_演示2</title>
    <style>
        body {
            margin: 0;
        }
        .outer {
            border: 2px solid red;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: orange;
            float: left;
        }
        .box2 {
            width: 120px;
            height: 120px;
            background-color: green;
           
            display: inline-block;
           
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>
例4
  • 给box2设置overflow为auto，浮动的box1没有盖住box2，并且下面也是没有缝隙的（相比例3中中设置box2的display为inline-block）

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_BFC_演示2</title>
    <style>
        body {
            margin: 0;
        }
        .outer {
            border: 2px solid red;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: orange;
            float: left;
        }
        .box2 {
            width: 120px;
            height: 120px;
            background-color: green;
          
            overflow: auto;
          
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>
延申（左右布局）
  • 既然浮动元素不能盖住开启了BFC的元素，而且在例4中，我们看到浮动元素box1和overflow:hidden的box2元素处于同一行，那么如果我们不给box2设置宽度，又会怎么样呢？如下，我们可以做成基本的左右布局效果。
  • 下面，我们不设置box2的宽度（不要设置为100%），并且，设置box2的overflow:auto或hidden都可以
    在这里插入图片描述
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_BFC_演示2</title>
    <style>
        body {
            margin: 0;
        }
        .outer {
            border: 2px solid red;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: orange;
            float: left;
        }
        .box2 {
            height: 120px;
            background-color: green;
          
            overflow: auto;
          
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

演示3

浮动造成父元素高度塌陷问题

  • 当父元素未设置高度，子元素又都浮动起来，这个时候父元素的高度就会塌陷，这种情况，也可以使用上面提到的完美解决塌陷问题的方案，但在这里，我们通过开启父元素的BFC解决

使用BFC解决问题

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_BFC_演示3</title>
    <style>
        body {
            margin: 0;
        }
        .outer {
            width: 400px;
            background-color: #888;
            /* float: left; */
            /* position: absolute; */
            /* display: inline-block; */
            /* display: table; */
            /* overflow: auto; */
            /* column-count: 1; */
            /* display: flow-root; */
        }
        .inner {
            width: 100px;
            height: 100px;
            float: left;
        }
        .inner1 {
            background-color: orange;
        }
        .inner2 {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
    </div>
</body>
</html>
ps酷教程
关注
专栏目录
BFC详解
weixin_47450807的博客
03-21 737
一、写在前面 今天看到一道面试题，主要是关于BFC的理解，下面将针对BFC的相关特性做出总结。 二、何为BFC BFC(Block Formatting Context)格式化上下文，是 web页面中盒子模型布局的CSS渲染模式，指的是一个独立 的渲染区域或者是一个隔离的独立容器。 三、形成BFC的条件 1、浮动元素，float除none以外。 2、定位元素，position(absolute, fixed) 3、display为以下其中之一的值：inline-block,table-cell,table
TensorFlow内存管理bfc算法实例
12-20
TensorFlow的内存管理机制采用了Best-Fit with Coalescing (BFC)算法，这是一种简化版的Doug Lea的malloc算法，用于有效地分配、释放和管理内存，减少内存碎片。BFC算法的核心在于如何高效地组织和操作内存块，即...
Vue2+Vue3笔记（尚硅谷张天禹老师）day01
qq_45418837的博客
08-20 770
Vue2+Vue3笔记（尚硅谷张天禹老师）
Vue2+Vue3笔记（尚硅谷张天禹老师）day03
qq_45418837的博客
09-05 479
Vue2+Vue3笔记 尚硅谷张天禹
张天禹 Vue3+TypesScript
weixin_55896343的博客
12-31 1311
2020年9月18日，Vue.js发布版3.0One Piece（n4800+次提交40+个RFC600+次PR300+贡献者3.3.4setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。姓名：{{name}}
张天禹移动端学习
pscool的博客
06-09 861
程序员写了: width=2px， height=2px的盒子，若1个css像素直接对应1个物理像素，由于 iPhone3G/S与iPhone4屏幕尺寸相同，但iPhone4的屏幕能容纳下更多的物理像素点，所以iPhone4的物理像素点比iPhone3G/S小很多，那么理论上这个盒子在 iPhone4屏幕上也就会比iPhone3G/S屏幕上小很多，而事实是 iPhone3G/S和 iPhone4下这个盒子是一样大的！这就要靠设备独立像素。，它是为Web开发者创造的，用来精确地度量Web页面上的内容大小。
BFC
一颗苹果
09-10 1348
BFC(Block formatting Context) 块级格式化上下文，布局规则如下：         1.内部的盒子会在垂直方向，一个一个地放置；         2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；         3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；         4.BFC的区域不会...
BFC理解
weixin_52703987的博客
04-01 720
BFC理解 BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的。 BFC触发条件： 1.根元素，即html 2.float的值不为none（默认） 3.position的值为absolute或fixed 4.overflow的值不为visible（默认） display的值为inline-block、table-cell、table-c
什么是BFC？看这一篇就够了
热门推荐
Leon的博客
03-23 27万+
BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。 Box：css布局的基本单位 Box 是 CSS 布局...
BFC及其特性详解
健子
07-23 1999
什么是BFC BFC（Block Formatting Context）块级格式化上下文，w3c文档描述： 9.4 Normal flow Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level...
3分钟理解BFC
猫老板的豆
05-28 718
简介 BFC(Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域。 MDN上的解释：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。 一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。 BFC的形成 根元素(即<html>标签) 浮动元素 float 不为 none （为 left、right）
HTML-bfc初探
08-03
理解BFC可以帮助我们更好地控制网页的布局，解决浮动元素引起的问题，以及实现更精确的定位。 1. **什么是BFC**： BFC是一个独立的渲染区域，每个元素都会创建自己的BFC，内部的元素会按照一定的规则进行排列，...
10分钟理解CSS BFC原理及其应用
09-27
CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...
bfc的详细介绍以及大总结
01-17
### BFC（Block Formatting Context）的详细介绍与大总结 #### 一、BFC的基本概念 BFC，全称为Block Formatting Context（块级格式化上下文），是CSS中一种特殊的渲染规则，它决定了内部元素如何布局以及与其他...
【学习笔记】手写Tomcat 二
LearnTech_123的博客
09-11 1070
在昨天的基础上，再进一步优化，能够响应HTML文件，图片等静态资源。
UEFI学习笔记（五）：EDK II PCD的概念、类型、使用
qq_44189622的博客
09-11 811
如果在BIOS里面有一些模块是binary方式集成进来的而这些binary又需要用到PCD（用于Binary Release），那么这些Binary集成的要用到的PCD就必须要设置为。PCD的值存在memory里面，下次启动时，上次更改的值丢失了，每次启动都是从default值开始。是存在VPD空间的（在FLASH上，只读），一般是出厂配置。如果platform是从源码build出来的，没有binary在里面的时候，PCD用的都是。作用域在一个模块中（模块级的），可以在Binary Level进行修改。
计算几何学习
网安小白
09-12 428
学习计算几何过程中对经典算法的记录
看Threejs好玩示例，学习创新与技术(二)
最新发布
htsitr2的专栏
09-14 269
它的主要特点是确保生成的点之间保持一定的最小距离，从而避免点的聚集。这种方法在计算机图形学、游戏开发、物理模拟等领域中非常有用，尤其是在需要生成自然分布的对象（如树木、石头等）时。如果不进行裁剪，那么效果如下（初步的锯齿感是因为矩形内采样的结果）。为啥这么复杂呢，为啥不开始存储每个方块的UV呢？下面代码的vTexCoords（=savedModelMatrix，已修改）记录方块所在的位置，vWorldPosition表示方块中像素的偏移。在上面那副图中，聪明的你一定初步猜到了每个方块的纹理是怎么得到的。
CSS隐藏的魔力：BFC深入解析
本文将深入探讨CSS中的"潜藏着的BFC"，即Block Formatting Context，这是一种在网页布局中起着重要作用的概念。BFC是块级元素的一种特殊渲染模式，它为元素创建了一个独立的布局区域，遵循特定的渲染规则。了解BFC有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值