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

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

news 2026/3/27 15:44:43

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

OpenClaw+GLM-4.7-Flash：智能爬虫与数据分析

OpenClawGLM-4.7-Flash&#xff1a;智能爬虫与数据分析 1. 为什么需要智能爬虫与数据分析 最近我在做一个小型竞品分析项目时&#xff0c;遇到了一个典型的数据收集困境&#xff1a;需要从20多个竞品网站抓取产品功能描述、定价策略和用户评价&#xff0c;然后整理成结构化数…...

编程新知 2026/3/27 14:50:47

PETRV2-BEV模型的高精度3D车道检测效果展示

PETRV2-BEV模型的高精度3D车道检测效果展示 1. 引言 想象一下&#xff0c;一辆自动驾驶汽车在复杂的城市道路中行驶&#xff0c;需要实时识别车道线、判断可行驶区域、预测周围车辆轨迹。这背后离不开一项关键技术——3D车道检测。传统的2D检测方法在复杂道路场景中往往力不从…...

编程新知 2026/3/27 14:48:47

Fortran开发环境配置2024实践指南

Fortran开发环境配置2024实践指南 【免费下载链接】vscode-fortran-support Fortran language support for Visual Studio Code 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-fortran-support 在科学计算与工程领域&#xff0c;Fortran语言依然保持着不可替代的…...

编程新知 2026/3/27 13:25:07

ChatGPT官网镜像实战：生产环境内存泄漏排查与修复全记录

国内开发者如果想借助ChatGPT进行生产环境故障排查和性能分析&#xff0c;最便捷的方案是通过聚合镜像平台RskAi&#xff08;www.rsk.cn&#xff09;。该平台支持ChatGPT&#xff08;GPT-4o&#xff09;国内直接访问&#xff0c;无需任何特殊网络环境&#xff0c;且提供每日免费…...

编程新知 2026/3/27 13:04:54

大数据领域数据科学与云计算的结合应用

大数据领域数据科学与云计算的结合应用 关键词：大数据、数据科学、云计算、结合应用、数据分析 摘要：本文深入探讨了大数据领域中数据科学与云计算的结合应用。首先介绍了数据科学和云计算的背景知识，然后详细解释了这两个核心概念及其相互关系。通过具体的算法原理、数学模…...

编程新知 2026/3/27 12:32:48

Iceoryx(冰羚)：无锁队列与并发控制的设计与实现3（源码解析）

接上篇设计4: 索引管理层&#xff08; MpmcIndexQueue / CyclicIndex&#xff09;Subscriber存储数据使用的是queue&#xff0c;是为了保证数据的读取顺序。MpmcLockFreeQueue 为了满足多个进程同时写的情况&#xff0c;采用了索引数据分离的方案&#xff08;底层的索引实现为 …...

编程新知 2026/3/27 12:04:21

SDMatte多平台适配实践：Chrome/Firefox/Safari在Web抠图交互中的兼容性与性能表现

SDMatte多平台适配实践&#xff1a;Chrome/Firefox/Safari在Web抠图交互中的兼容性与性能表现 1. 引言 SDMatte是一款面向高质量图像抠图场景的AI模型&#xff0c;特别擅长处理主体分离、透明物体提取、边缘精修等任务。对于玻璃、薄纱、羽毛、叶片等边缘细节复杂或半透明目标…...

编程新知 2026/3/27 11:21:58

BURSTER 9235 (85437090) 应变片信号放大器

BURSTER 9235 (85437090) 应变片信号放大器品牌&#xff1a;BURSTER&#xff08;德国波司特&#xff0c;精密测量技术专家&#xff09;型号&#xff1a;9235内部订货号&#xff1a;85437090类型&#xff1a;直连式&#xff08;In-Line&#xff09;应变片传感器信号放大器一、核…...

编程新知 2026/3/27 10:51:50

vLLM-v0.17.1效果展示：vLLM在中文古诗生成任务中的韵律保持能力

vLLM-v0.17.1效果展示&#xff1a;vLLM在中文古诗生成任务中的韵律保持能力 1. vLLM框架简介 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库&#xff0c;以其出色的速度和易用性著称。这个项目最初由加州大学伯克利分校的天空计算实验室开发&#xff0c;现在已经…...

编程新知 2026/3/27 10:27:44

lingbot-depth-pretrain-vitl-14惊艳效果：RGB输入→INFERNO伪彩深度图动态生成演示

lingbot-depth-pretrain-vitl-14惊艳效果&#xff1a;RGB输入→INFERNO伪彩深度图动态生成演示 1. 模型概述 LingBot-Depth (Pretrained ViT-L/14) 是一款基于 DINOv2 ViT-Large/14 编码器的深度估计与补全模型&#xff0c;拥有 321M 参数。该模型采用创新的 Masked Depth Mo…...

编程新知 2026/3/27 9:04:47