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

BFC 是什么

news 文章来源：https://blog.csdn.net/zz130428/article/details/129077866 2024/11/7 13:40:48

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

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

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

如何在Power Virtual Agents中实现身份验证

今天我们介绍一下如何通过身份验证的方式来使用Power Virtual Agents。首先进入“Microsoft 365-管理-Azure Active Directory管理中心”。 进入“Azure Active Directory管理中心”后选择“Azure Active Directory”中的“应用注册”-“新注册”。 输入新创建的应用程序名称后…...

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

金三银四必备软件测试必问面试题

初级软件测试必问面试题1、你的测试职业发展是什么&#xff1f;测试经验越多&#xff0c;测试能力越高。所以我的职业发展是需要时间积累的&#xff0c;一步步向着高级测试工程师奔去。而且我也有初步的职业规划&#xff0c;前 3 年积累测试经验&#xff0c;按如何做好测试工程…...

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

Java反序列化漏洞——CommonsCollections6链分析

一、前因因为在jdk8u71之后的版本中&#xff0c;sun.reflect.annotation.AnnotationInvocationHandler#readObject的逻辑发生了变化&#xff0c;导致CC1中的两个链条都不能使用&#xff0c;所有我们需要找一个在高版本中也可用的链条。/* Gadget chain: java.io.ObjectInputStr…...

编程日记 2023/2/18 5:40:40

Selenium浏览器自动化测试框架

Selenium浏览器自动化测试框架 目录&#xff1a;导读 1、selenium简介 介绍 功能 优势 2、基本使用 3、获取单节点 4、获取多节点 5、节点交互 6、动作链 7、执行JavaScript代码 8、获取节点信息 9、切换frame 10、延时等待 11、前进和后退 12、cookies 13、选…...

编程日记 2023/2/18 5:39:31

Hashmap链表长度大于8真的会变成红黑树吗？

1、本人博客《HashMap、HashSet底层原理分析》 2、本人博客《若debug时显示的Hashmap没有table、size等元素时&#xff0c;查看第19条》 结论 1、链表长度大于8时(插入第9条时)&#xff0c;会触发树化(treeifyBin)方法&#xff0c;但是不一定会树化&#xff0c;若数组大小小于…...

编程日记 2023/2/18 5:38:22

关于接地：数字地、模拟地、信号地、交流地、直流地、屏蔽地、浮地

除了正确进行接地设计、安装,还要正确进行各种不同信号的接地处理。控制系统中&#xff0c;大致有以下几种地线&#xff1a; &#xff08;1&#xff09;数字地&#xff1a;也叫逻辑地&#xff0c;是各种开关量&#xff08;数字量&#xff09;信号的零电位。 &#xff08;2&am…...

编程日记 2023/2/18 5:37:17

排序

一、数据流中的中位数题目描述&#xff1a;如何得到一个数据流中的中位数&#xff1f;如果从数据流中读出奇数个数值&#xff0c;那么中位数就是所有数值排序之后位于中间的数值。如果从数据流中读出偶数个数值&#xff0c;那么中位数就是所有数值排序之后中间两个数的平均值。…...

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

Android DataStore Proto存储接入流程详解与使用

一、介绍 通过前面的文字&#xff0c;我们已掌握了DataStore 的存储&#xff0c;但是留下一个尾巴&#xff0c;那就是Proto的接入。 Proto是什么&#xff1f; Protobuf&#xff0c;类似于json和xml&#xff0c;是一种序列化结构数据机制&#xff0c;可以用于数据通讯等场景&a…...

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

HiEV洞察 | 卖一台亏半台，激光雷达第一股禾赛隐忧仍在

作者 | 感知君Alex 编辑 | 王博2月9日晚&#xff0c;禾赛在万众瞩目下登陆纳斯达克&#xff0c;发行价19美元每股&#xff0c;首日涨超11%&#xff0c;市值超过Luminar&#xff0c;登顶全球市值最高的激光雷达公司。 随后两个交易日&#xff0c;其股价均有不同程度的涨幅&#…...

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

面试题61. 扑克牌中的顺子

题目 从若干副扑克牌中随机抽 5 张牌&#xff0c;判断是不是一个顺子&#xff0c;即这5张牌是不是连续的。2&#xff5e;10为数字本身&#xff0c;A为1&#xff0c;J为11&#xff0c;Q为12&#xff0c;K为13&#xff0c;而大、小王为 0 &#xff0c;可以看成任意数字。A 不能视…...

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

公司网站的开发和网版的重要性/seo推广怎么学

不传之术&#xff1a;80%胜率的波浪理论技法&#xff0c;交易期权的视频↓↓期权公式 诺贝尔经济学奖资料来源&#xff1a;雪球1。合约方向如上一篇文章所述&#xff0c;期权合约有两种类型&#xff1a;看涨期权和看跌期权。也称为看涨期权和看跌期权。期权公式 诺贝尔经济学奖…...

编程日记 2024/11/7 13:22:30

移动电商网站开发/如何在网上推广自己

引 言 数字生活方式是现代文明的一个重要标志。在与人们工作生活密切相关的电脑、手机和电视三大信息平台中&#xff0c;电脑和手机已实现了数字化和网络化&#xff0c;为人们带来了多姿多彩的资讯和娱乐服务&#xff0c;也为相关企业带来了巨额利润。数字电视将带来数字生活方…...

编程日记 2024/11/7 11:27:32

wordpress网站密码忘记/win10优化大师是官方的吗

Firefox真是一个好东西&#xff0c;它许多插件。本人是很讨厌插件的&#xff0c;每次电脑里都会安装一大堆无用的插件&#xff0c;看着心里不爽。由于项目需要&#xff0c;要看网页的代码&#xff0c;并 且找到有用信息&#xff0c;如果下载一个html页面&#xff0c;用记事本打…...

编程日记 2024/11/7 9:51:53

wordpress 文章编辑 插件/互联网推广广告

Akka 和 Storm 的设计差异 Akka 和 Storm 都是实现低延时, 高吞吐量计算的重要工具. 不过它们并非完全的竞品,如果说 Akka 是 linux 内核的话, storm 更像是类似 Ubuntu 的发行版.然而 Storm并非 Akka 的发行版, 或许说 Akka 比作 BSD, Storm 比作 Ubuntu 更合适. 实现的功能差…...

编程日记 2024/11/7 9:38:55

wordpress去除分类目录归档/seo外包 靠谱

一、加班时长实际情况二、榜单的榜样力量三、我该到底该如何求变呢&#xff1f;四、加班少的原因五、总结以下是一封来自被 CEO 逼疯的技术负责人的检讨书。想火&#xff01;&#xff01;&#xff01;自任开发部负责人一职以来&#xff0c;开发部在加班时长确实不够突出。作为负…...

编程日记 2024/11/7 9:32:43

昆明网站排名优化公司/廊坊seo关键词优化

6.引用 1.什么是引用&#xff1f; 引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&#xff0c;编译器不会为引用变量开辟内存空间&#xff0c;它和它引用的变量共用同一块内存空间。 **类型& 引用变量名(对象名) 引用实体&#xff1b;**void TestRef(…...

编程日记 2024/11/7 6:15:29