CSS中的BFC

devtools/2025/1/15 23:57:08/

什么是BFC

在这里插入图片描述

BFC,英语全称 Block formatting contexts,翻译成中文就是“块级格式化上下文”。

简单来说,就是页面中的一块渲染区域,并且有一套自己的渲染规则。它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,BFC提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。

言简意赅的说,BFC是一个独立的布局环境BFC内部的元素布局与外部互不影响。

BFC 的布局规则有如下几条:

  1. 内部的 Box 会在垂直方向一个接着一个地放置。
  2. Box 垂直方向上的距离由 margin 决定。属于同一个 BFC 的两个相邻的 Boxmargin 会发生重叠。
  3. 每个盒子的左外边框紧挨着包含块的左边框,即使浮动元素也是如此。
  4. BFC 的区域不会与浮动 Box 重叠。
  5. BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
  6. 计算 BFC 的高度时,浮动子元素也参与计算

实际上在一个标准流中 body 元素就是一个天然的 BFC

其他区域,单独设置成一个 BFC,这里记录了一些常见的方式:

元素或属性属性值
根元素
floatleft、right
postionabsolute、fixed
overflowauto、scroll、hidden
displayinline-block、table-cell

上面只记录了一些常见的方式,完整的 BFC 触发方式可以参阅:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

那么块级格式化上下文有啥具体的用处呢?我们来看几个场景

常见的 BFC 应用有:

  • 解决浮动元素令父元素高度坍塌的问题
  • 解决非浮动元素被浮动元素覆盖问题
  • 解决外边距垂直方向重合的问题
  1. 解决浮动元素令父元素高度坍塌的问题
<div class="father"><div class="son"></div>
</div>
css">.father{border: 5px solid;
}
.son{width: 100px;height: 100px;background-color: blue;float: left;
}

在上面的代码中,父元素的高度是靠子元素撑起来的,但是一旦我们给子元素设置了浮动,那么父元素的高度就塌陷了。如下:

在这里插入图片描述

此时我们就可以将父元素设置成一个 BFC,例如:

css">.father{border: 5px solid;overflow: hidden; /* 将父元素设置为一个 BFC */
}
.son{width: 100px;height: 100px;background-color: blue;float: left;
}

效果:可以看到由于父元素变成 BFC,高度并没有产生塌陷了,其原因是在计算 BFC 的高度时,浮动子元素也参与计算

  1. 非浮动元素被浮动元素覆盖
<div class="box1"></div>
<div class="box2"></div>
css">.box1{width: 100px;height: 50px;background-color: red;float: left;
}
.box2{width: 50px;height: 50px;background-color: blue;
}

在上面的代码中,由于 box1 设置了浮动效果,所以会脱离标准流,自然而然 box2 会往上面跑,结果就被高度和自己一样的 box1 给挡住了。

在这里插入图片描述

设置 box2BFC,如下:

css">.box1{width: 100px;height: 50px;background-color: red;float: left;
}
.box2{width: 50px;height: 50px;background-color: blue;overflow: hidden;
}

效果:由于 BFC 的区域不会与浮动 box 重叠,所以即使 box1 因为浮动脱离了标准流,box2 也不会被 box1 遮挡

在这里插入图片描述

基于此特点,我们就可以制作两栏自适应布局,方法就是给固定栏设置固定宽度,给不固定栏开启 BFC

<div class="left">导航栏</div>
<div class="right">这是右侧</div>
css">*{margin: 0;padding: 0;
}
.left {width: 200px;height: 100vh;background-color: skyblue;float: left;
}.right {width: calc(100% - 200px); height: 100vh;background-color: yellowgreen;
}

效果:在上面的代码中,我们要设置两栏布局,左边栏宽度固定,右边栏自适应。结果我们发现右侧出现了空白

究其原因就是右侧区域与浮动盒子重叠了

在这里插入图片描述

修改 .right 部分的代码,添加 overflow:hidden 使其成为一个 BFC

css">.right {width: calc(100% - 200px); height: 100vh;background-color: yellowgreen;overflow: hidden;
}

效果:因为 BFC 的区域不会与浮动 Box 重叠,所以右侧空白没有了

在这里插入图片描述

  1. 外边距垂直方向重合的问题
    BFC 还能够解决 margin 折叠的问题,例如:
<div class="box1"></div>
<div class="box2"></div>
css">* {margin: 0;padding: 0;
}.box1{width: 100px;height: 100px;background-color: red;margin-bottom: 10px;
}
.box2{width: 100px;height: 100px;background-color: blue;margin-top: 10px;
}

效果:

在这里插入图片描述

此时我们可以在 box2 外部再包含一个 div,并且将这个 div 设置为 BFC,如下:

<div class="box1"></div>
<div class="container"><div class="box2"></div>
</div>
css">* {margin: 0;padding: 0;
}.box1{width: 100px;height: 100px;background-color: red;margin-bottom: 10px;
}
.box2{width: 100px;height: 100px;background-color: blue;margin-top: 10px;
}
.container{overflow: hidden;
}

效果:

在这里插入图片描述

更多关于格式化上下文的内容,可以参阅 MDN

BFChttps://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context


http://www.ppmy.cn/devtools/10859.html

相关文章

wx小程序-button的bindtap事件

一、button标签 由于小程序语法中&#xff0c;处理函数不能带参数&#xff0c;所以不能实现直接调用要修改的数据。所以除了用bindtap&#xff08;提示&#xff1a;bindtap和bind:tap两种语法都是正确的&#xff09;绑定处理函数&#xff0c;还需要在button属性中添加一个data…

流量阶梯 用量按照日、月、年、自然月、自然年,周期叠加分段计算各个阶梯金额

1、前言 1.1 商品有三个属性 周期时长、周期单位、叠加次数 商品周期时长周期单位叠加次数A4月2B1月6 1.2 商品配置阶梯 用量大于0GB, 流量总价30元用量大于90GB, 流量单价0.19元/GB用量大于100GB, 流量单价0.12元/GB 2、根据不同属性获取阶梯下金额 2.1 B商品结果 B商品1…

算法设计与分析实验4 :利用动态规划的方法解决子集等和分割判断问题

实验4 利用动态规划的方法解决子集等和分割判断问题 一、实验目的 1. 了解动态规划的主要思想。 2. 掌握背包问题解决方法用以解决该问题。 3. 分析核心代码的时间复杂度和空间复杂度。 二、实验内容和要求 题目:给定一个只包含正整数的非空数组。是否可以将这个数组分…

设计模式学习笔记 - 开源实战二(中):从Unix开源开发学习应对大型复杂项目开发

概述 项目越复杂、代码量越多、参与开发人员越多、开发维护时间越长&#xff0c;我们就要越重视代码质量。代码质量下降会导致项目研发困难重重&#xff0c;比如&#xff1a;开发效率低&#xff0c;找了很多人&#xff0c;天天加班也出活不多&#xff1b;线上 bug 频发&#x…

蚁狮优化算法(ALO算法)学习

蚁狮优化算法&#xff08;Ant Lion Optimizer&#xff0c;简称ALO&#xff09;是一种模仿自然界中蚁狮捕食行为的群智能优化算法。这种算法由Seyedali Mirjalili于2015年提出&#xff0c;旨在解决各种优化问题。 在自然界中&#xff0c;蚁狮通过挖掘一个漏斗状的陷阱来捕捉蚂蚁…

「PHP系列」PHP Cookie/Session详解

文章目录 一、PHP Cookie1. Cookie的基本概念2. PHP中操作Cookie的常用函数3. Cookie案例代码设置Cookie读取Cookie删除Cookie 4. 注意事项 二、PHP Session1. PHP Session的基本概念2. PHP中操作Session的常用函数3. Session案例代码启动Session并设置数据读取Session数据销毁…

Swift常用的第三方库

以下是一些常用的Swift第三方库及其链接&#xff1a; Alamofire&#xff1a;用于网络请求的库。https://github.com/Alamofire/Alamofire Kingfisher&#xff1a;用于异步下载和缓存图片的库。https://github.com/onevcat/Kingfisher SwiftyJSON&#xff1a;用于处理JSON数据…

Zabbix监控系统:基础配置及部署代理服务器

目录 前言 一、自定义监控内容 1、在客户端创建自定义key 2、在服务端验证新建的监控项 3、在web界面创建自定义监控项模版 3.1 创建模版 3.2 创建应用集&#xff08;用于管理监控项&#xff09; 3.3 创建监控项 3.4 创建触发器 3.5 创建图形 3.6 将主机与模板关联…