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

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

news 2025/9/16 4:55:31

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

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/9/9 10:18:26

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/9/11 12:54:47

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/8/9 2:59:35

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/8/26 22:00:33

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/8/29 21:22:21

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/7/25 14:20:29

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/8/1 7:53:11

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/6/19 4:31:50

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/9/4 1:57:51