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

经常用但是不知道什么是BFC？

news 2026/2/8 18:54:15

BFC学习

block formatting context 块级格式上下文

简单理解：

一个独立容器，内部布局不会受到外面的影响

形成条件：

1.浮动元素：float除none之外的值

2.绝对定位：position:absolute,fixed

3.display:inline-block,table-cell,table-caption,flex

4.overflow除visible之外的值（hidden,auto,sccroll)

5.body根元素

BFC特性

1.内部的盒子会在垂直方向上一个接一个的放置；他这里指的是很多个BFC的摆放

2.垂直方向上的距离由margin决定，同一个BFC中的两个相邻的标签外边距会发生重叠

前两点其实就是同一个BFC内部盒子和普通外部盒子排列一样，也有margin重叠的问题

      .float-item {width: 100%;height: 200px;background-color: greenyellow;margin: 20px;}.float-father {overflow: hidden;}<div class="float-father"><div class="float-item">1</div><div class="float-item">2</div></div>

3.BFC的区域不会与float的元素区域重叠

4.BFC盒子里面与外面互不影响

5.计算 BFC 的高度时，浮动元素也参与计算

前两点就是它内部的盒子摆放规则和外面普通盒子一样，我们主要利用的是后三点

作用：

1 利用BFC避免margin重叠

情景：正常情况下父子盒子的margin会发生重叠，他会取大的；这时我让父盒子变为BFC，他们的边距就不会重叠了；兄弟盒子也一样，他们上下边会取大的，我们可以将一个盒子用父盒子包起来，给父盒子添加overflow:hidden

    <style>* {padding: 0;margin: 0;}.first {background-color: pink;height: 100px;margin-bottom: 20px;}.second {background-color: skyblue;height: 100px;margin-top: 50px;}</style><body><div class="first"></div><div class="second"></div></body>

给一个盒子包一层，并将父盒子变为BFC

      .father {overflow: hidden;}<div class="first"></div><div class="father"><div class="second"></div></div>

避免父子盒子margin重叠：

      .father {overflow: hidden; /* 让父盒子变为BFC就不会重叠了 */background-color: skyblue;margin-bottom: 20px;}.child {height: 20px;background-color: pink;margin-bottom: 50px;}<div class="father"><div class="child"></div></div><div>这是底下的盒子</div>

2 清除浮动，防止盒子塌陷；塌陷的原因是父盒子没有高度，over:flow能够清除浮动的原因：他触发了父盒 子的BFC,由于计算BFC的高度时，浮动元素也参与计算

如果子元素是position:absolute,父元素也是坍塌的,父元素overflow:hidden是撑不开的

      .float-item {float: left;width: 100%;height: 200px;background-color: greenyellow;}.float-father {overflow: hidden; /* 给父元素变为BFC解决高度坍塌问题，不加父盒子高度就撑不开，为0了 */}<div class="float-father"><div class="float-item"></div></div>

3 阻止元素被浮动元素所覆盖;让被覆盖的元素成为BFC

    <style>.item {font-size: 16px;height: 200px;border: 1px solid red;}.left {float: left;background-color: pink;width: 200px;}.right {background-color: skyblue;width: 360px;display:inline-block /* 将他变为BFC就不会被左侧浮动元素遮挡了 */}</style></head><body><div class="item left">左边的内容 左边的内容 左边的内容 左边的内容 左边的内容 左边的内容左边的内容 左边的内容 左边的内容 左边的内容 左边的内容 左边的内容</div><div class="item right">开始右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容</div>

右边的元素被左边的所遮挡，可以将右边元素变为BFC

相关文章：

经常用但是不知道什么是BFC？

BFC学习 block formatting context 块级格式上下文 简单理解&#xff1a; 一个独立容器&#xff0c;内部布局不会受到外面的影响 形成条件&#xff1a; 1.浮动元素&#xff1a;float除none之外的值 2.绝对定位&#xff1a;position:absolute,fixed 3.display:inline-blo…...

编程日记 2023/2/20 1:11:11

GO的临时对象池sync.Pool

GO的临时对象池sync.Pool 文章目录GO的临时对象池sync.Pool一、临时对象池&#xff1a;sync.Pool1.1 临时对象的特点1.2 临时对象池的用途1.3 sync.Pool 的用法二、临时对象池中的值会被及时清理掉2.1 池清理函数2.2 池汇总列表2.3 临时对象池存储值所用的数据结构2.4 临时对象…...

编程日记 2023/2/20 1:10:02

高精度算法一

目录 1. 基础知识 2. 大整数 大整数 3. 大整数 - 大整数 1. 基础知识 利用计算机进行数值计算&#xff0c;有时会遇到这样的问题&#xff1a;有些计算要求精度高&#xff0c;希望计算的数的位数可达几十位甚至几百位&#xff0c;虽然计算机的计算精度也算较高了&#xff0c…...

编程日记 2023/2/20 1:08:54

2023年全国最新食品安全管理员精选真题及答案1

百分百题库提供食品安全管理员考试试题、食品安全员考试预测题、食品安全管理员考试真题、食品安全员证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 11.预包装食品的标签内容应使用规范的汉字&#xff0c;但可以同时使用&a…...

编程日记 2023/2/20 1:07:47

C++入门：引用

目录 一. 什么是引用 1.1 引用的概念 1.2 引用的定义 二. 引用的性质和用途 2.1 引用的三大主要性质 2.2 引用的主要应用 三. 引用的效率测试 3.1 传值调用和传引用调用的效率对比 3.2 值返回和引用返回的效率对比 四. 常引用 4.1 权限放大和权限缩小问题 4.2 跨…...

编程日记 2023/2/20 1:06:39

SpringSecurity的权限校验详解说明(附完整代码)

说明 SpringSecurity的权限校是基于SpringSecurity的安全认证的详解说明(附完整代码) &#xff08;https://blog.csdn.net/qq_51076413/article/details/129102660&#xff09;的讲解&#xff0c;如果不了解SpringSecurity是怎么认证&#xff0c;请先看下【SpringSecurity的安…...

编程日记 2023/2/20 1:05:32

Java-集合（5）

Map接口 JDK8 Map接口实现子类的特点 Map和Collection是并列关系&#xff0c;Map用于保存具有映射关系的数据&#xff1a;Key-ValueMap中的key和value可以是任何引用类型的数据&#xff0c;会封装到HashMap$Node对象中Map中的key不允许重复&#xff0c;原因和HashSet一样Map…...

编程日记 2023/2/20 1:04:25

研制过程评审活动（四）设计定型阶段

1、设计定型阶段主要任务 设计定型的主要任务是对武器装备性能和使用要求进行全面考核，以确认产品是否达到《研制任务书》和《研制合同》的要求。   设计定型阶段应最终确定《产品规范》、《工艺规范》和《材料规范》的正式版本，并形成正式的全套生产图样、有关技术文件及目…...

编程日记 2023/2/20 1:03:17

【Linux】进程替换

文章目录进程程序替换替换原理替换函数函数返回值函数命名理解在makefile文件中一次生成两个可执行文件总结:程序替换时运行其它语言程序进程程序替换 程序要运行要先加载到内存当中 , 如何做到? 加载器加载进来,然后程序替换 为什么? ->冯诺依曼 因为CPU读取数据的时候只…...

编程日记 2023/2/20 1:02:09

LeetCode171-Excel表列序号(进制转换问题)

LeetCode171-Excel表列序号1、问题描述2、解题思路&#xff1a;进制转换3、代码实现1、问题描述 给你一个字符串columnTitle,表示Excel表格中得列名称。返回该列名称对应得列序号。 例如&#xff1a; A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> 28 …...

编程日记 2023/2/20 1:01:02

React SSR

ReactDOMServer 参考链接&#xff1a;https://zh-hans.reactjs.org/docs/react-dom-server.html ReactDOMServer 对象允许你将组件渲染成静态标记。通常&#xff0c;它被使用在 Node 服务端上 // ES modules import * as ReactDOMServer from react-dom/server; // CommonJS v…...

编程日记 2023/2/20 0:59:54

如何系统地优化页面性能

页面优化&#xff0c;其实就是要让页面更快地显示和响应。由于一个页面在它不同的阶段&#xff0c;所侧重的关注点是不一样的&#xff0c;所以如果要讨论页面优化&#xff0c;就要分析一个页面生存周期的不同阶段。 通常一个页面有三个阶段&#xff1a;加载阶段、交互阶段和关…...

编程日记 2023/2/20 0:58:43

Vulnhub 渗透练习（八）—— THE ETHER: EVILSCIENCE

环境搭建 环境下载 靶机和攻击机网络适配都选 NAT 即可。 信息收集 主机扫描 两个端口&#xff0c;22 和 80&#xff0c;且 apache httpd 2.4.0~2.4.29 存在换行解析漏洞。 Apache HTTPD是一款HTTP服务器&#xff0c;它可以通过mod_php来运行PHP网页。其2.4.0~2.4.29版本中…...

编程日记 2023/2/20 0:57:36

华为OD机试题 - 水仙花数 2（JavaScript）| 代码+思路+重要知识点

最近更新的博客 华为OD机试题 - 字符串加密（JavaScript） 华为OD机试题 - 字母消消乐（JavaScript） 华为OD机试题 - 字母计数（JavaScript） 华为OD机试题 - 整数分解（JavaScript） 华为OD机试题 - 单词反转（JavaScript） 使用说明 参加华为od机试，一定要注意不要完全背…...

编程日记 2023/2/20 0:56:29

字符设备驱动基础（二）

目录 一、五种IO模型------读写外设数据的方式 二、阻塞与非阻塞 三、多路复用 3.1 应用层&#xff1a;三套接口select、poll、epoll 3.2 驱动层&#xff1a;实现poll函数 四、信号驱动 4.1 应用层&#xff1a;信号注册fcntl 4.2 驱动层&#xff1a;实现fasync函数 一、…...

编程日记 2023/2/20 0:55:21

看见统计——第三章 概率分布

看见统计——第三章 概率分布 参考 https://github.com/seeingtheory/Seeing-Theory中心极限定理 概率分布描述了随机变量取值的规律。 随机变量Random Variables &#x1f525; 定义&#xff1a;将样本空间中的结果映射到实数的函数 XXX 称为随机变量(random variable)&a…...

编程日记 2023/2/20 0:54:08

【基于众包标注的语文教材句子难易度评估研究 论文精读】

基于众包标注的语文教材句子难易度评估研究 论文精读信息摘 要0 引言1 相关研究2 众包标注方法3 语料库构建3.1 数据收集3.1 基于五点量表的专家标注3.3 基于成对比较的众包标注4 特征及模型4.1 特征抽取4.2 模型与实验设计4.2.1 任务一:单句绝对难度评估4.2.2 任务二:句对相对…...

编程日记 2023/2/20 0:52:59

实例五：MATLAB APP design-APP登录界面的设计

一、APP 界面设计展示 注：在账号和密码提示框输入相应的账号和密码后，点击登录按钮，即可跳转到程序中设计的工作界面。 二、APP设计界面运行结果展示...

编程日记 2023/2/20 0:51:53

作用域和闭包：

1、LHS和RHS查询编译一段代码&#xff0c;需要js引擎和编译器&#xff08;js引擎负责整个程序运行时所需的各种资源的调度&#xff0c;编译器只是js引擎的一部分&#xff0c;负责将JavaScript源码编译成机器能识别的机器指令&#xff0c;然后交给引擎运行&#xff09;编译的过程…...

编程日记 2023/2/20 0:50:46

Vue常见面试题？

1、说说你对SPA单页面的理解&#xff0c;它的优缺点是什么&#xff1f; SPA(single-page application)仅在Web页面初始化时加载相应的HTML、JavaScript和CSS。一旦页面加载完成&#xff0c;SPA不会因为用户的操作而进行页面的重新加载或跳转&#xff1b;取而代之的是利用路由机…...

编程日记 2023/2/20 0:49:38

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2026/1/25 4:36:37

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2026/1/23 12:18:20

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/2/3 22:50:07

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2026/1/29 3:00:56

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2026/2/1 3:12:03