当前位置： 首页 > news >正文

BFC 是什么

news 2026/5/13 20:47:24

在页面布局的时候，经常出现以下情况：

  • 这个元素高度怎么没了？
  • 这两栏布局怎么没法自适应？
  • 这两个元素的间距怎么有点奇怪的样子？
  • ......

原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个 BFC 的俩个相邻的盒子的 margin 会发生重叠，与方向无关。
  • 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
  • BFC 的区域不会与 float 的元素区域重叠
  • 计算 BFC 的高度时，浮动子元素也参与计算
  • BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

触发条件

可以通过如下的设置来触发（产生）一个BFC：

  • 根元素，即 HTML 元素
  • 浮动元素：float 值为 left、right
  • overflow 值不为 visible，为 auto、scroll、hidden
  • display 的值为 inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • position 的值为 absolute 或 fixed

应用场景

当一个容器具备了 BFC 之后， 就可以利用BFC的特性，解决很多问题

防止 margin 重叠（塌陷）

<style>p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align: center;margin: 100px;}
</style>
<body><p>Haha</p><p>Hehe</p>
</body>

页面显示如下：

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个 P 的margin为 80 的话，两个 P 之间的距离还是 100，以最大的为准。

前面讲到，同一个BFC的俩个相邻的盒子的margin会发生重叠

可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠

<style>.wrap {overflow: hidden; // 新的BFC}p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align: center;margin: 100px;}
</style>
<body><p>Haha</p><div class="wrap"><p>Hehe</p></div>
</body>

这时候，边距则不会重叠：

清除内部浮动

<style>.par {border: 5px solid #fcc;width: 300px;}.child {border: 5px solid #f66;width: 100px;height: 100px;float: left;}
</style>
<body><div class="par"><div class="child"></div><div class="child"></div></div>
</body>

页面显示如下：

而BFC在计算高度时，浮动元素也会参与，所以可以触发.par元素生活才能BFC，则内部浮动元素计算高度时候也会计算

.par {overflow: hidden;
}

实现效果如下：

自适应多栏布局

这里举个两栏的布局

<style>body {width: 300px;position: relative;}.aside {width: 100px;height: 150px;float: left;background: #f66;}.main {height: 200px;background: #fcc;}
</style>
<body><div class="aside"></div><div class="main"></div>
</body>

效果图如下：

前面讲到，每个元素的左外边距与包含块的左边界相接触

因此，虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触

而BFC的区域不会与浮动盒子重叠

所以可以通过触发main生成BFC，以此适应两栏布局

.main {overflow: hidden;
}

这时候，新的BFC不会与浮动的.aside元素重叠。因此会根据包含块的宽度，和.aside的宽度，自动变窄

效果如下：

总结

可以看到上面几个案例，都体现了BFC实际就是页面一个独立的容器

里面的子元素不影响外面的元素

相关文章：

BFC 是什么

在页面布局的时候&#xff0c;经常出现以下情况&#xff1a; 这个元素高度怎么没了&#xff1f;这两栏布局怎么没法自适应&#xff1f;这两个元素的间距怎么有点奇怪的样子&#xff1f;...... 原因是元素之间相互的影响&#xff0c;导致了意料之外的情况&#xff0c;这里就涉及…...

编程日记 2023/2/18 6:05:46

07 react+echart+大屏

reactechart大屏大屏ECharts 图表实际步骤React Typescript搭建大屏项目&#xff0c;并实现屏幕适配flexible rem实现适配1. 安装插件对echarts进行的React封装&#xff0c;可以用于React项目中&#xff0c;支持JS、TS如何使用完整例子官网参考大屏 ECharts 图表 ECharts 图…...

编程日记 2023/2/18 6:04:36

Linux/Ubuntu安装部署Odoo15仓管系统，只需不到十步---史上最成功

sudo apt-get update sudo apt install postgresql -y sudo apt-get -f install sudo dpkg -i /home/ubuntu/odoo_15.0.latest_all.deb —报错再次执行上一条命令再执行 —安装包地址&#xff1a;http://nightly.odoo.com/15.0/nightly/deb/–翻到最下面 sudo apt-get ins…...

编程日记 2023/2/18 6:03:30

Python奇异值分解

当AAA是方阵时&#xff0c;可以很容易地进行特征分解&#xff1a;AWΣW−1AW\Sigma W^{-1}AWΣW−1&#xff0c;其中Σ\SigmaΣ是AAA的特征值组成的对角矩阵。如果WWW由标准正交基组成&#xff0c;则W−1WTW^{-1}W^TW−1WT&#xff0c;特征分解可进一步写成WTΣWW^T\Sigma WWTΣ…...

编程日记 2023/2/18 6:02:20

AWS攻略——子网

文章目录分配子网给Public子网分配互联网网关创建互联网网关附加到VPC给Public子网创建路由表关联子网打通Public子网和互联网网关创建Public子网下的EC2进行测试配置Private子网路由给Private子网创建路由表附加在Private子网创建Private子网下的EC2进行测试创建实例在跳板机上…...

编程日记 2023/2/18 6:01:10

java面试 - mq

RocketMq和RabbitMq的优缺点 1、RabbitMQ 优点&#xff1a;rabbitMq 几万级数据量&#xff0c;基于erlang语言开发&#xff0c;因此响应速度快些&#xff0c;并且社区活跃度比较活跃&#xff0c;可视化界面。 缺点&#xff1a;数据吞吐量相对与小一些&#xff0c;并且是基于er…...

编程日记 2023/2/18 6:00:02

PTP GPTP芯片资料翻译88E6352

88E6352应用 网关 车载信息娱乐 车身域控制器 PTP PTP通过周期型地交换控制包实现 选择其中网络最佳质量时钟元素&#xff0c;作为PTP网络中Grand Master.没有Grand Master 节点变成PTP slave节点。PTP节点从Grand Master节点获得他们驱动频率和时间信息。 基本观念是PTP帧…...

编程日记 2023/2/18 5:58:54

用Python实现一个电影订票系统

一、效果展示通过Python实现一个电影订票系统&#xff0c;效果如下所示&#xff1a;二、整体结构图三、代码分解3.1 infos.py一部电影的详细信息适合用 字典 结构来存储&#xff0c;我们可以给字典里添加多个键值对来保存电影的名称、座位表和宣传时用的字符画&#xff0c;比如…...

编程日记 2023/2/18 5:57:45

什么是瞪铃企业

“瞪羚企业”是指创业后跨过死亡谷以科技创新或商业模式创新为支撑进入高成长期的中小企业。认定范围主要是产业领域符合国家和省战略新兴产业发展方向&#xff0c;涵盖新兴工业、新一代信息技术、生物健康、人工智能、金融科技、节能环保、消费升级等领域。按照硅谷的解释&…...

编程日记 2023/2/18 5:56:36

【深度学习】多分类问题和多标签分类问题

上一章——激活函数 文章目录什么是多分类问题Softmax贝叶斯公式softmax的损失函数多标签分类问题什么是多分类问题 在之前的课程中&#xff0c;我们学习了二分问题&#xff0c;二分问题中的所有数据会被分类为0和1&#xff08;或者Ture和False&#xff09;两种输出标签。但是…...

编程日记 2023/2/18 5:55:28

大学生开学买什么，返校必备数码好物推荐

开学还不知道需要准备些什么&#xff0c;这篇开学数码好物&#xff0c;希望能够对你在开学购买的好物有一些帮助&#xff0c;一款好的数码装备&#xff0c;可以让我们在学校学习当中能够用最少的时间&#xff0c;最大的产出&#xff0c;节省时间&#xff0c;提高学习效率&#…...

编程日记 2023/2/18 5:54:20

Unreal Engine06：Actor的实现

写在前面 Actor是可以放进地图的最基本类&#xff0c;这里主要是介绍一下Actor的使用。 一、空间坐标系 1. Actor的变换操作 Actor的变换变换操作主要包括四个部分&#xff1a; 位置&#xff1b;旋转&#xff1b;缩放&#xff1b; 上面三者都是对应三个轴进行变换&#xff1…...

编程日记 2023/2/18 5:53:13

2023美国大学生数学建模竞赛C题思路解析（含代码+数据可视化）

以下为2023美国大学生数学建模竞赛C题思路解析&#xff08;含代码数据可视化&#xff09;规则&#xff1a;猜词&#xff0c;字母猜对&#xff0c;位置不对为黄色&#xff0c;位置对为绿色&#xff0c;两者皆不对为灰色。困难模式下的要求&#xff1a;对于猜对的字母&#xff08…...

编程日记 2023/2/18 5:52:06

aws codebuild 自定义构建环境和本地构建

参考资料 Extending AWS CodeBuild with Custom Build Environments Docker in custom image sample for CodeBuild codebuild自定义构建环境 在创建codebuild项目的时候发现 构建环境是 Docker 映像&#xff0c;其中包含构建和测试项目所需的所有内容的完整文件系统 用ru…...

编程日记 2023/2/18 5:51:00

3年功能3年自动化，从8k到23k的学习过程

简单的先说一下&#xff0c;坐标杭州&#xff0c;14届本科毕业&#xff0c;算上年前在阿里巴巴的面试&#xff0c;一共有面试了有6家公司&#xff08;因为不想请假&#xff0c;因此只是每个晚上去其他公司面试&#xff0c;所以面试的公司比较少&#xff09;其中成功的有4家&…...

编程日记 2023/2/18 5:49:53

leaflet: 数据聚合，显示当前bounds区域中的点的名称列表（078）

第078个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中实现数据聚合的功能 ，左边列出右边可视区域内的marker的名称。这里主要用到了可视区域的范围以及contains函数。 直接复制下面的 vue+leaflet源代码，操作2分钟即可运行实现效果 文章目录 示例效果配置方…...

编程日记 2023/2/18 5:48:46

XXL-JOB分布式任务调度框架(一)-基础入门

文章目录1.什么是任务调度2.常见定时任务方案2.1. 传统定时任务方案示例2.2. 缺点分析3.什么是分布式任务调度&#xff1f;3.1. 并行任务调度3.2. 高可用3.3. 弹性扩容3.4. 任务管理与监测4.市面上常见的分布式任务调度产品5.初识xxl-job6.xxl-job架构设计6.1.设计思想6.2.架构…...

编程日记 2023/2/18 5:47:33

基于CentOS 7 搭建Redis 7集群

我们的目标是使用2台&#xff08;多台服务器类似&#xff09;服务器搭建一个3主3从的redis集群。 我们为什么要使用redis 7呢&#xff1f;因为6、7的版本都做了大量优化&#xff0c;比如6引入了多线程&#xff08;一些JAVA八股文面试还喜欢问redis为什么是单线程&#xff09;&…...

编程日记 2023/2/18 5:46:23

Lesson5.3---Python 之 NumPy 统计函数、数据类型和文件操作

一、统计函数 NumPy 能方便地求出统计学常见的描述性统计量。最开始呢&#xff0c;我们还是先导入 numpy。 import numpy as np1. 求平均值 mean() mean() 是默认求出数组内所有元素的平均值。我们使用 np.arange(20).reshape((4,5)) 生成一个初始值默认为 0&#xff0c;终止…...

编程日记 2023/2/18 5:45:14

Puppeteer 爬虫学习

puppeteer简介&#xff1a; Puppeteer 是一个 Node 库&#xff0c;它提供了一个高级 API 来通过 DevTools 协议 控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行&#xff0c; 但是可以通过修改配置文件运行“有头”模式。能作什么&#xff1f;&#xff1a; 生成…...

编程日记 2023/2/18 5:44:05

为AI编码助手打造专业技能库：DSkills项目实战指南

1. 项目概述&#xff1a;为AI编码助手打造的专业技能库如果你和我一样&#xff0c;日常重度依赖Claude Code、Codex或者Gemini CLI这类AI编码助手来提升开发效率&#xff0c;那你肯定遇到过这样的场景&#xff1a;想让AI帮你搜索最新的技术文档&#xff0c;它却只能给出过时的信…...

编程新知 2026/5/13 18:27:43

基于MCP协议的数据中心选址智能体：从地理空间分析到AI决策

1. 项目概述与核心价值最近在做一个挺有意思的项目&#xff0c;客户是一家大型的互联网服务提供商&#xff0c;他们面临一个经典但棘手的挑战&#xff1a;如何在全球范围内科学地规划新的数据中心选址。这可不是在地图上随便画个圈那么简单&#xff0c;背后涉及到网络延迟、电力…...

编程新知 2026/5/13 17:54:57

Windows 11任务栏透明化完整教程：TranslucentTB让你的桌面焕然一新

Windows 11任务栏透明化完整教程&#xff1a;TranslucentTB让你的桌面焕然一新 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB 想让Windo…...

编程新知 2026/5/13 16:05:40

Windows热键侦探：快速定位热键冲突的终极解决方案指南

Windows热键侦探&#xff1a;快速定位热键冲突的终极解决方案指南 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 在Window…...

编程新知 2026/5/13 16:03:37

WordPress站点AI友好化：LLMs.txt插件配置与Markdown输出实战

1. 项目概述&#xff1a;为你的WordPress站点打造AI友好的内容接口如果你运营着一个WordPress网站&#xff0c;并且希望你的内容能被当下最前沿的大型语言模型&#xff08;LLMs&#xff09;——比如ChatGPT、Claude、Gemini等——更好地发现、理解和利用&#xff0c;那么你很可…...

编程新知 2026/5/13 13:18:30

从零部署noVNC：一次完整的远程桌面服务搭建与排错实录

1. 为什么选择noVNC&#xff1f; 最近在帮朋友部署远程桌面服务时&#xff0c;发现很多传统VNC方案都需要安装客户端&#xff0c;操作复杂不说&#xff0c;兼容性还差。直到发现了noVNC这个神器&#xff0c;它直接用浏览器就能访问远程桌面&#xff0c;彻底解决了跨平台访问的痛…...

编程新知 2026/5/13 13:13:27

FcμR识别IgM复杂机制的揭示：解锁人体免疫早期应答之谜

一、引言免疫系统是机体抵御病原体入侵、维持内环境稳定的关键防线。在免疫应答过程中&#xff0c;不同类型的免疫球蛋白发挥着独特的作用。其中&#xff0c;IgM作为人体五类免疫球蛋白之一&#xff0c;在免疫应答早期起着至关重要的作用。而Fc受体作为免疫系统中的重要组成部分…...

编程新知 2026/5/13 12:56:57

Windows 10/11终极指南：如何快速解决PL2303驱动兼容性问题

Windows 10/11终极指南&#xff1a;如何快速解决PL2303驱动兼容性问题 【免费下载链接】pl2303-win10 Windows 10 driver for end-of-life PL-2303 chipsets. 项目地址: https://gitcode.com/gh_mirrors/pl/pl2303-win10 还在为Windows 10/11系统上的PL2303串口设备无法…...

编程新知 2026/5/13 12:54:56

AutoJs6架构深度解析：JavaScript自动化引擎在Android平台的实现原理

AutoJs6架构深度解析&#xff1a;JavaScript自动化引擎在Android平台的实现原理 【免费下载链接】AutoJs6 安卓平台 JavaScript 自动化工具 (Auto.js 二次开发项目) 项目地址: https://gitcode.com/gh_mirrors/au/AutoJs6 AutoJs6作为Android平台领先的JavaScript自动化…...

编程新知 2026/5/13 12:37:46

Xendit支付网关MCP服务端：东南亚支付集成的架构设计与工程实践

1. 项目概述&#xff1a;一个面向东南亚支付场景的MCP服务端最近在对接东南亚市场的支付业务时&#xff0c;遇到了一个挺有意思的挑战&#xff1a;如何高效、安全地集成Xendit这家东南亚主流的支付网关。Xendit提供的API功能强大&#xff0c;覆盖了印尼、菲律宾等国的多种本地化…...

编程新知 2026/5/13 8:32:44