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

BFC 是什么

news 2026/3/27 20:55:15

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

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

原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到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

2026必看：八款热门AI编程工具横评

一、AI编程工具榜单综述当下AI技术全面渗透软件开发领域&#xff0c;各类AI编程工具大幅降低了开发门槛、提升了编码效率&#xff0c;成为开发者必备的效率神器。本次横评精选海内外8款主流产品&#xff0c;覆盖AI原生IDE、插件式编程助手等不同形态&#xff0c;全方位盘点各工…...

编程新知 2026/3/27 20:15:08

AutoGen多智能体框架：从协作价值到企业级实践指南

AutoGen多智能体框架&#xff1a;从协作价值到企业级实践指南 【免费下载链接】autogen 启用下一代大型语言模型应用 项目地址: https://gitcode.com/GitHub_Trending/au/autogen 在人工智能快速发展的今天&#xff0c;如何让AI系统像人类团队一样高效协作完成复杂任务&…...

编程新知 2026/3/27 20:07:07

遇到‘Got minus one from a read call‘别慌！Oracle 12c连接数优化全攻略

深度解析Oracle 12c连接数优化&#xff1a;从"Got minus one from a read call"到高可用架构 当Java应用突然抛出java.sql.SQLRecoverableException: IO Error: Got minus one from a read call异常时&#xff0c;这往往是数据库连接资源耗尽的信号。本文将带您深入O…...

编程新知 2026/3/27 19:06:49

从零开始：如何为你的深度学习项目选择最合适的开源数据集

从零开始&#xff1a;如何为你的深度学习项目选择最合适的开源数据集 当你站在深度学习项目的起点&#xff0c;面对琳琅满目的开源数据集时&#xff0c;如何做出明智的选择往往决定了项目的成败。数据集不仅是模型训练的"原材料"&#xff0c;更是影响最终性能的关键变…...

编程新知 2026/3/27 18:02:06

寻音捉影·侠客行多场景落地：覆盖会议/媒体/司法/金融/教育五大垂直领域

寻音捉影侠客行多场景落地&#xff1a;覆盖会议/媒体/司法/金融/教育五大垂直领域 1. 产品核心功能解析 寻音捉影侠客行是一款基于先进语音识别技术的音频关键词检索工具&#xff0c;它能够像江湖中的隐士高手一样&#xff0c;在浩瀚的音频海洋中精准定位特定关键词。这款工具…...

编程新知 2026/3/27 17:50:04

智能文献管理全面指南：从学术研究痛点到高效解决方案

智能文献管理全面指南&#xff1a;从学术研究痛点到高效解决方案 【免费下载链接】zotero Zotero is a free, easy-to-use tool to help you collect, organize, annotate, cite, and share your research sources. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero …...

编程新知 2026/3/27 17:39:59

Charticulator：数据可视化的自由创作平台与技术革命

Charticulator&#xff1a;数据可视化的自由创作平台与技术革命 【免费下载链接】charticulator Interactive Layout-Aware Construction of Bespoke Charts 项目地址: https://gitcode.com/gh_mirrors/ch/charticulator 当数据分析师面对预设模板无法表达复杂数据关系时…...

编程新知 2026/3/27 17:01:35

ae新手福音，用快马平台ai生成带注释的片段视频代码轻松入门

作为一个刚接触AE的新手&#xff0c;第一次打开软件时确实被复杂的界面吓到了。各种面板、时间轴、效果控件看得眼花缭乱&#xff0c;更别说要自己写表达式了。直到发现了InsCode(快马)平台&#xff0c;用自然语言描述就能生成带详细注释的AE项目代码&#xff0c;简直是新手的救…...

编程新知 2026/3/27 16:19:21

终极风扇控制指南：如何用FanControl 264版彻底告别电脑噪音烦恼

终极风扇控制指南&#xff1a;如何用FanControl 264版彻底告别电脑噪音烦恼 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Tr…...

编程新知 2026/3/27 16:07:19

Stable Diffusion VAE重构图像效果不理想？可能是你忘了调整这个关键参数

Stable Diffusion VAE图像重构效果优化指南&#xff1a;关键参数解析与实战调整 当你第一次使用Stable Diffusion的VAE&#xff08;Variational Autoencoder&#xff09;进行图像重构时&#xff0c;可能会遇到这样的困惑&#xff1a;明明按照教程一步步操作&#xff0c;为什么输…...

编程新知 2026/3/27 15:59:16