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

CSS中的BFC详细讲解（易懂）

news 文章来源：https://blog.csdn.net/weixin_57677300/article/details/129046793 2024/11/19 13:17:42
带你用最简单的方式理解最全面的BFC~~~

1.先了解最常见定位方案

  1. 普通流

  • 元素按照其在 HTML 中的先后位置至上而下布局

  • 行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行

  • 所有元素默认都是普通流定位

  1. 浮动

元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移

  1. 绝对定位

元素会整体脱离普通流，因此绝对定位不会对其兄弟元素造成影响

2.BFC讲解

BFC是属于普通流的，我们可以把BFC看成页面的一块渲染区，他有自己的渲染规则，简单来说就是BFC可以看做元素的属性，当元素有了BFC这个属性，这个元素可以看做隔离了的容器，容器里面的元素不会在布局上影响到外面的元素。

1.BFC特性

  1. 每一个BFC区域只包含其子元素，不包含其子元素的子元素

  1. 每一个BFC区域相互独立，互不影响

2.如何触发BFC

也就是说怎么给这个元素添加BFC属性，它需满足下列任一条件。

1. 根元素(<html>)2. 设置float浮动，不包含none3. 绝对定位元素 (元素的 position 为 absolute 或 fixed)4. display 为 inline-block、table-cell、table-caption、table、table-row、table-row-groutable-header-group、table-footer-group、inline-table、flow-root、flex 或 inline-flex、grid 或 inline-grid5. 设置overflow，不为visible6. contain 值为 layout、content 或 paint 的元素7. 多列容器（column-count 或 column-width (en-US) 值不为 auto，包括column-count 为 1）

更多查阅文档MDN

3.BFC的作用

1.第一个作用：避免外边距重叠

看个案例（面试也会出现）

.box{width: 200px;height: 200px;background: #5aa878;margin: 100px;}<body><div class="box"></div><div class="box"></div>
</body>

大家认为上下盒子间距是200px吧（狗头）

结果是上间距100px的，这不是bug,这是一种规范。块的上外边距margin-top和下外边距margin-bottom会合并为单个边距，如果两个边距相等取其中一个，若大小边距不一样区最大边距，。

如何解决呢？

只需要将这两个div放置不同的BFC中，那么两个BFC的内容互不干扰。把代码修改如下：

.box{width: 200px;height: 200px;background: #5aa878;margin: 100px;}
.container{overflow: hidden;}<div class='container'><div class="box"></div>
</div>
<div class="container"><div class="box"></div>
</div>
给这两个box给各自一个div包裹，然后给这个div添加overflow: hidden;属性触发container的BFC，最后就可以看到理想的结果200px

2.第二个作用：清除浮动

啥也不说上代码，看看是不是你想的那样

.container{border: 2px solid yellowgreen;
}
.content{width: 100px;height: 100px;background: #47cabf;margin: 100px;float: left;
}<div class="container"><div class="content"></div>
</div>
你们想的应该是一个边框包裹着一个100px的方块，可结果不尽人意····

我们给子元素添加了浮动导致子元素脱离了文档流，所以只剩下2px的边框了。

如何解决？

同样我们给父容器添加BFC属性，添加overflow: hidden;属性触发BFC。这样就起到清除浮动的效果。

.container{border: 2px solid yellowgreen;overflow: hidden;
}
.content{width: 100px;height: 100px;background: #47cabf;margin: 100px;float: left;
}<div class="container"><div class="content"></div>
</div>

这样就可以了。

3.防止元素被浮动元素覆盖

先上才艺，给两个盒子设置宽高颜色，其中一个设置浮动。

.box1{width: 100px;height: 100px;background: blue;float: left;
}
.box2{width: 200px;height: 200px;background: red;
}<div class="box1"></div>
<div class="box2"></div>
你们想的结果可能是两个盒子独占一行，可是结果~~~

这里可以看到浮动元素覆盖了没有添加浮动的元素，如果想不被覆盖，可以触发正常的元素的BFC即可。所有在第二个元素添加overflow: hidden;属性，这样这两个属性就互不干扰。

.box1{width: 100px;height: 100px;background: blue;float: left;
}
.box2{width: 200px;height: 200px;background: red;overflow: hidden;
}<div class="box1"></div>
<div class="box2"></div>

这样就正常了。

4.防止父子元素外边距塌陷

上菜~~

.box1{width: 200px;height: 200px;background: blue;
}
.box2{width: 100px;height: 100px;background: red;margin-top: 20px;
}<div class="box1"><div class="box2"></div>
</div>
大家想的结果是父元素距离子元素20px,然而~~

给子元素添加margin-top:50px后，影响了父元素，给父元素添加BFC属性即可。

.box1{width: 200px;height: 200px;background: blue;overflow: hidden;
}
.box2{width: 100px;height: 100px;background: red;margin-top: 20px;
}<div class="box1"><div class="box2"></div>
</div>

ok~~~

6.总结

  1. 一个BFC区域只包含它的子元素，不包含其子元素的子元素。

  1. 成为一个BFC区域要满足一定的条件。

  1. 不同的BFC区域相互独立，互补影响。

相关文章：

CSS中的BFC详细讲解（易懂）

带你用最简单的方式理解最全面的BFC~~~1.先了解最常见定位方案普通流元素按照其在 HTML 中的先后位置至上而下布局行内元素水平排列&#xff0c;直到当行被占满然后换行&#xff0c;块级元素则会被渲染为完整的一个新行所有元素默认都是普通流定位浮动元素首先按照普通流的位置…...

编程日记 2023/2/16 13:13:38

华为3面，官网显示面试通过了...开始泡池子，进入漫长等待期

背景&#xff1a; 现在双非本科&#xff0c;非计算机科班&#xff0c;有算法方面的奖&#xff0c;有嵌入式开发经历&#xff0c;官网显示面试通过&#xff0c;短信说录用情况在十个工作日内告知&#xff0c;看别人的说法应该是泡池子了。 全程视频面试&#xff0c;一天面完三…...

编程日记 2023/2/16 13:12:33

【新2023】华为OD机试 - 构成的正方形数量（Python）

构成的正方形数量 题目 输入 N 个互不相同的二维整数坐标, 求这 N 个坐标可以构成的正方形数量。(内积为零的两个向量垂直) 输入 第一行输入为 N，N 代表坐标数量，N为正整数。N <= 100 之后的 K 行输入为坐标 x y以空格分隔，x, y 为整数, -10 <= x, y <= 10 输…...

编程日记 2023/2/16 13:11:24

ElasticSearch之RestClient操作索引库和文档

前言&#xff1a;上文介绍了使用DSL语言操作索引库和文档&#xff0c;本篇文章将介绍使用Java中的RestClient来对索引库和文档进行操作。 希望能够加深自己的印象以及帮助到其他的小伙伴儿们&#x1f609;&#x1f609;。 如果文章有什么需要改进的地方还请大佬不吝赐教&#x…...

编程日记 2023/2/16 13:10:19

Lp正则化

一、L1 和 L2范数&#xff08;norm&#xff09;A norm is a mathematical thing that is applied to a vector. The norm of a vector maps vector values to values in [0,∞). In machine learning, norms are useful because they are used to express distances: this vect…...

编程日记 2023/2/16 13:09:12

云原生 -- Docker进阶（Docker-compose，Docker网络简单介绍）

Dockerfile的构建过程 每条保留字段必须为大写字母。Dockerfile每行只支持一条指令&#xff0c;但是每条指令可以带多个参数&#xff0c;并且每条保留字指令后面至少要带有一个参数。从上到下依次执行。每条指令都会创建一个新的镜像层&#xff0c;并提交新的镜像。 大致流程…...

编程日记 2023/2/16 13:08:05

taskset命令：让进程运行在指定CPU上

1. 操作场景 taskset命令&#xff0c;可用于进程的CPU调优&#xff0c;可以把云服务器上运行的某个进程&#xff0c;指定在某个CPU上工作。 本节操作指导用户使用taskset命令让进程运行在指定CPU上。 2. 操作步骤 2.1. 执行如下命令&#xff0c;查看云服务器CPU核数。 cat …...

编程日记 2023/2/16 13:06:59

Pod基本概念与Pod应用生命周期

Pod是一个逻辑抽象概念&#xff0c;kubernetes创建和管理的最小单元&#xff0c;一个Pod由一个容器或多个容器组成。特点&#xff1a;一个Pod可以理解为是一个应用实例&#xff0c;提供服务Pod中容器始终部署在一个Node上Pod中容器共享网络、存储资源Pod主要用法&#xff1a;运…...

编程日记 2023/2/16 13:05:52

DDL 数据定义语言

DDL 数据定义语言 目录概述一、库的管理1、库的创建2、库的修改【一般不修改&#xff0c;容易出现错误】3、库的删除二、表的管理【重要】1、表的创建2、表的修改3、表的删除4、表的复制 【可以跨库复制】练习题概述 数据定义语言 库和表的管理 一、库的管理 创建、修改、删除…...

编程日记 2023/2/16 13:04:46

设计模式概述

1. 概念 设计模式概念的提出&#xff1a;   设计模式最早于1977年在建筑设计行业中被 克里斯托夫亚历山大&#xff08;Christopher Alexander&#xff09; 在他的著作 《建筑模式语言&#xff1a;城镇、建筑、构造》 中提出。   软件工程界在1990年开始了设计模式话题的研…...

编程日记 2023/2/16 13:03:37

华为OD机试 - 箱子之形摆放（Python）| 真题+思路+考点+代码+岗位

箱子之形摆放 题目 有一批箱子（形式为字符串，设为str）， 要求将这批箱子按从上到下以之字形的顺序摆放在宽度为 n 的空地，请输出箱子的摆放位置。 例如：箱子ABCDEFG，空地宽度为3，摆放结果如图： 则输出结果为： AFG BE CD 输入 输入一行字符串，通过空格分隔，前面部…...

编程日记 2023/2/16 13:02:30

第九章：创建用户和用户权限

Windows&#xff1a;创建用户&#xff1a;第一种方法创建用户&#xff1a;先点右上角的工具&#xff0c;然后点击AD用户和计算机双击skills.com打开目录&#xff0c;再双击Users&#xff0c;进入文件夹中在右框中右击空白处&#xff0c;新建用户填充好用户信息后点击下一步然后…...

编程日记 2023/2/16 13:01:21

如何制定人生目标

一、如何分解目标 人生终极目标并不一定要多详细精确&#xff0c;但一定要被分解&#xff0c;要分成长期目标、中期目标和一系列的短期目标&#xff0c;其中短期目标又可以分解为你能够马上操作的一个个的小目标。 二、目标制定的原则 目标制定遵循 SMART-W 原则&#xff1a; …...

编程日记 2023/2/16 13:00:16

用户认证概述

文章目录一、用户身份认证1.1 单一服务器模式1.2 SSO&#xff08;Single Sign On&#xff09;模式1.3 Token模式二、JWT令牌2.1 JWT 令牌说明2.2 JWT令牌的组成2.3 JWT 问题和趋势2.4 JWT 测试一、用户身份认证 1.1 单一服务器模式 一般过程如下&#xff1a; 用户向服务器发送…...

编程日记 2023/2/16 12:59:11

XQuery FLWOR + HTML

XML 实例文档 我们将在下面的例子中继续使用这个 "books.xml" 文档&#xff08;与上一节中的文件相同&#xff09;。 在您的浏览器中查看 "books.xml" 文件。 在一个 HTML 列表中提交结果 请看下面的 XQuery FLWOR 表达式&#xff1a; for $x in doc(&…...

编程日记 2023/2/16 12:58:05

MySQL用户管理

文章目录MySQL用户管理用户用户信息创建用户修改用户密码删除用户数据库的权限MySQL中的权限给用户授权回收权限MySQL用户管理 与Linux操作系统类似&#xff0c;MySQL中也有超级用户和普通用户之分。如果一个用户只需要访问MySQL中的某一个数据库&#xff0c;甚至数据库中的某…...

编程日记 2023/2/16 12:56:58

C++【模板初阶】

✨个人主页&#xff1a; Yohifo &#x1f389;所属专栏&#xff1a; C修行之路 &#x1f38a;每篇一句&#xff1a; 图片来源 No one saves us but ourselves, no one can and no one may. We ourselves must walk the path. 除了我们自己&#xff0c;没有人能拯救我们&#xf…...

编程日记 2023/2/16 12:55:53

华为OD机试 - 磁盘容量（Python）| 真题+思路+考点+代码+岗位

磁盘容量 题目 磁盘的容量单位常用的有M、G、T 他们之间的换算关系为1T =1024G，1G=1024M 现在给定n块磁盘的容量，请对他们按从小到大的顺序进行稳定排序 例如给定5块盘的容量 5 1T 20M 3G 10G6T 3M12G9M 排序后的结果为 20M 3G 3M12G9M 1T 10G6T 注意单位可以重复出现 上述…...

编程日记 2023/2/16 12:54:47

更专业、安全、可控！政企都选择WorkPlus私有化部署

现如今政企机构在信息化建设的过程中&#xff0c;内部的沟通协作都离不开即时通讯软件。但大多数企业使用的即时通讯软件都是Saas部署的&#xff0c;虽然使用Saas部署产品成本低&#xff0c;又方便快捷&#xff0c;但还是建议企业有条件最好使用私有化部署的即时通讯软件&#…...

编程日记 2023/2/16 12:53:41

[SDX12] X12 USB to LTE IPA概率不生效问题分析及优化策略

问题描述 在测试USB to LTE的流量过程中，发现IPA概率失效，正常可以跑到320Mbps，但是跑流1分钟左右会出现IPA失效及跑流掉坑的情况。 问题log dmesg log 3,1862,149793394,-;ipa ipa3_ioctl:3564 using obselete command: IPA_IOC_RM_ADD_DEPENDENCY 3,1863,149793549,-;ipa …...

编程日记 2023/2/16 12:52:36

mysql8.0（单表查询与多表拆线）

目录 单表查询 1、显示所有职工的基本信息。 2、查询所有职工所属部门的部门号&#xff0c;不显示重复的部门号。 3、求出所有职工的人数。 4、列出最高工资和最低工资。 5、列出职工的平均工资和总工资。 6、创建一个只有职工号、姓名和工作时间的新表&…...

编程日记 2023/2/16 12:51:28

用于汽车传感器的混合点云语义压缩：性能评估

Hybrid Point Cloud Semantic Compression for Automotive Sensors: A Performance Evaluation https://arxiv.org/pdf/2103.03819.pdf 在自动驾驶中&#xff0c;车辆与车辆之间的信息共享起着重要作用。在所有传感器中&#xff0c;激光雷达产生的3D点云的数据量通常较高。因…...

编程日记 2023/2/16 12:50:22

最流行十大在线客服系统排行榜-市场常见客服系统软件排行-2023最新

2023年榜单规则依据 在线客服系统十大品牌榜数据由CNPP品牌榜中榜大数据「研究院」和CN10排排榜技术「研究院」通过资料收集整理&#xff0c;并基于大数据统计及人为根据市场和参数条件变化的分析研究专业测评而得出&#xff0c;是大数据、云计算、数据统计真实客观呈现的结果&…...

编程日记 2023/2/16 12:49:12

算法笔记（六）—— 二叉树相关概念及经典算法题

二叉树的相关概念&#xff08;判断方式&#xff09; 1. 搜索二叉树&#xff1a;对每棵子树&#xff0c;左树比头小&#xff0c;右树比头大。 中序遍历&#xff0c;判断是否升序 2. 完全二叉树&#xff1a;最后一层满或从左到右遍满。 宽度遍历&#xff0c;如果有节点有右孩子…...

编程日记 2023/2/16 12:48:01

redux全网最详细教程

一.路由懒加载 关键点&#xff1a; lazy懒加载 Suspense组件&#xff08;添加加载提示&#xff09; utils文件夹 –LazyLoad.js //lazy懒加载 Suspense 组件&#xff08;添加加载提示&#xff09; import {lazy,Suspense} from react export default function LazyLoad(url)…...

编程日记 2023/2/16 12:46:56

华为OD机试 - 匿名信（Python）| 真题+思路+考点+代码+岗位

匿名信 题目 电视剧《分界线》里面有一个片段，男主为了向警察透露案件细节，且不暴露自己，于是将报刊上的字减下来，剪拼成匿名信。 现在又一名举报人，希望借鉴这种手段，使用英文报刊完成举报操作。 但为了增加文章的混淆度，只需满足每个单词中字母数量一致即可，不关注…...

编程日记 2023/2/16 12:45:46

【Python】编写代码实现指定下标值顺序进行正序和倒序排序算法编程

&#x1f389;&#x1f389; 在本次python文章中&#xff0c;主要通过定义一个排序方法&#xff0c;实现一组数列能够按照另一组数列指定的位置进行重新排序输出&#xff0c;默认正序排序&#xff0c;可通过True表示逆序输出 目录1、知识点2、数列和元组1&#xff09;错误遍历方…...

编程日记 2023/2/16 12:44:41

Sitara™处理器的产品开发路线图

Sitara™处理器的产品开发路线图概述Evaluation Phase(评估阶段)Board Development Phase(硬件发展阶段&#xff0c;硬件设计人员应重点关注这个阶段)Software Development Phase(软件发展阶段)Product Phase/SW Lifecycle概述 一般情况下&#xff0c;会存在四个主要的发展阶段…...

编程日记 2023/2/16 12:43:36

岗位来啦-华为研发OD招聘

研发OD招聘 ★★关于我们★★ 万物互联时代已到来&#xff0c;无线通信技术正在重塑世界。作为行业领导者&#xff0c;华为无线致力于通过移动创新消除数字鸿沟&#xff0c;构建万物互联的智能世界。基于5G的技术&#xff0c;家庭无线宽带接入、车联网、云AR/VR、eMBB高清视频…...

编程日记 2023/2/16 12:42:28

【LeetCode】剑指 Offer 06. 从尾到头打印链表 p58 -- Java Version

题目链接&#xff1a; https://leetcode.cn/problems/cong-wei-dao-tou-da-yin-lian-biao-lcof/ 1. 题目介绍&#xff08;06. 从尾到头打印链表&#xff09; 输入一个链表的头节点&#xff0c;从尾到头反过来返回每个节点的值&#xff08;用数组返回&#xff09;。 【测试用例…...

编程日记 2023/2/16 12:41:22

那个网站做稻草交易/搜狗收录提交入口

交换机stack 1。注意交换机型号，ios版本必须都保持一致。 2。连接好堆叠线 首先更改交换机的序号，更改后更改交换机的优先级 注意：新的交换机默认堆叠序列号（stack member number），堆叠优先级（stack member priority value）都为1。 如果新加一交换机需要做，改变当面堆…...

编程日记 2024/11/19 13:02:56

wap网站如何建设/进入百度

2019独角兽企业重金招聘Python工程师标准>>> 如下是tomcat的配置文件server.xml中配置Http11NioProtocol协议的示例 <Connector connectionTimeout"20000" maxThreads"1000" port"8080" protocol"org.apache.coyote.http11.H…...

编程日记 2024/11/19 8:33:35

工信部网站备案系统/网站推广的渠道有

冯.诺依曼体系结构,个人的理解:物理电学补充:所有的物质,是由分子或原子组成的。分子是能保持物质化学性质不变的最小微粒。分子是由原子组成的&#xff0c;可分为单原子分子和多原子分子。原子的原子核式结构&#xff1a;原子的中心为原子核&#xff0c;电子在不同轨道上绕着原…...

编程日记 2024/11/19 6:12:05

做cpa的博客网站类型/世界杯球队最新排名

先决条件&#xff1a;a. 启动Windows Management Instrumentation服务&#xff0c;开放TCP135端口。b. 本地安全策略的“网络访问: 本地帐户的共享和安全模式”应设为“经典-本地用户以自己的身份验证”。1. wmic /node:"192.168.1.20" /user:"domain\administr…...

编程日记 2024/11/19 2:38:45

织梦网站怎么做301/广州网站优化外包

目录 1、MYSQL数据结构 2、MYSQL常用函数 3、MYSQL操作流程 4、实例 MySQL是一个开源码的小型关系数据库管理系统&#xff0c;体积小&#xff0c;速度快&#xff0c;总体成本低&#xff0c;开源。MySQL有以下特性: (1) 使用C和C编写&#xff0c;并使用了多种编译器进行测试&…...

编程日记 2024/11/19 2:26:30

php网站培训机构企业做网站/seo成功案例分析

本篇文章帮大家学习xml-RPC实例(java)&#xff0c;包含了XML-RPC实例(Java)使用方法、操作技巧、实例演示和注意事项&#xff0c;有一定的学习价值&#xff0c;大家可以用来参考。在本节中&#xff0c;将通过Java编程语言演示如何使用XML-RPC&#xff0c;首先创建一个使用Java类…...

编程日记 2024/11/19 1:26:45