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

BFC 是什么

news 2025/12/20 15:41:19

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

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

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

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/11/12 7:08:59

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/10/7 0:04:52

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2025/11/30 2:35:09

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2025/12/19 18:23:35

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

编程新知 2025/12/19 14:06:38

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/10/25 7:41:33

在golang中如何将已安装的依赖降级处理，比如：将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...

编程新知 2025/10/20 16:05:17

命令行关闭Windows防火墙

命令行关闭Windows防火墙 引言一、防火墙：被低估的"智能安检员"二、优先尝试！90%问题无需关闭防火墙方案1：程序白名单（解决软件误拦截）方案2：开放特定端口（解决网游/开发端口不通）三、命令行极速关闭方案方法一：PowerShell（推荐Win10/11）​方法二：CMD命令…...

编程新知 2025/8/27 20:07:03

leetcode_69.x的平方根

题目如下 &#xff1a; 看到题 &#xff0c;我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历&#xff0c;我们是整数的平方根&#xff0c;所以我们分两…...

编程新知 2025/12/16 20:16:28