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

前端进阶Html+css09----BFC模型

news 2026/5/19 8:09:45

1.什么是BFC模型
全称是：Block formatting context（块级格式化上下文），是一个独立的布局环境，不受外界的影响。

2.FC,BFC,IFC
元素在标准流里都属于一个FC（Formatting Context）。
块级元素的布局属于一个BFC（Block formatting context）。例如div/p/h1等 -> BFC布局中盒子
行内级元素的布局属于一个IFC（Inline Formatting Context）。例如img/a/span/i -> IFC布局中

2.哪些情况会创建BFC
根元素(html)
浮动元素(元素的float值不是none)
绝对定位元素(元素的position为absolute或者fixed)
行内块元素(元素的display为inline-block)
表格单元格(元素的display为table-cell，HTML表格单元格默认为该值，表格标题(元素的display为table-caption，HTML表格标题默认为该值)row，tbody，thead，tfoot的默认属性)或inline-table)
overflow计算值(Computed)不为visible的块元素
弹性元素(display为flex或inline-flex元素的直接子元素)
网格元素(display为grid或inline-grid元素的直接子元素)
display值为flow-root的元素

3.BFC的特性
1)在一个BFC中，盒子会从包含块的顶部开始，在垂直方向上会一个挨着一个摆放，可能很多人都对这一点习以为常，但这点是BFC帮助我们实现的。当我们对某个盒子设置一个margin-top的时候，BFC会帮助我们解析，然后会在盒子布局时候给一个上边距
2)在一个BFC中，每个元素的左边缘都会紧贴着包含块的左边缘
3)在同一个BFC中，在垂直方向上，相邻两个盒子的margin会重叠，值取两者中较大的

4.BFC 的作用
创建 BFC 的元素，它的自动高度需要计算浮动元素
创建 BFC 的元素，它的边框盒不会与浮动元素重叠
创建 BFC 的元素，不会和它的子元素进行外边距合并

5.利用BFC特性解决margin重叠问题

 <style>.box1{width: 100px;height: 100px;background-color: red;margin-bottom: 20px;}.box2{width: 100px;height: 100px;background-color: burlywood;margin-top: 30px;}
</style>
<body><div class="box1"></div><div class="box2"></div>
</body>

讲解：这个时候box1和box2都在html这个BFC里面，所以会发生重叠，上下margin取较大的30px;
在这里插入图片描述
我们应该给box1外面套一层，然后给外层的盒子设置BFC。这时外层盒子和box2处于同一BFC,但box1和box2处于两个不同的BFC。所以不会再发生重叠。

<style>.box1{width: 100px;height: 100px;background-color: red;margin-bottom: 20px;}.box2{width: 100px;height: 100px;background-color: burlywood;margin-top: 30px;}.container{overflow: hidden;}
</style>
<body><div class="container"><div class="box1"></div></div><div class="box2"></div>
</body>

在这里插入图片描述
6.利用BFC特性解决高度塌陷问题
1）如果一个元素的父元素没有设置高，那么父元素的高将由子元素撑开。如下所示：

<style>.parent{border: 1px solid black;background-color: aqua;}.child{height: 50px;width: 300px;background-color: red;}
</style>
<body><div class="parent"><div class="child"></div></div>
</body>

在这里插入图片描述
2）如果我们给子元素设置浮动。父元素会出现高度塌陷。

<style>.parent{border: 1px solid black;background-color: aqua;}.child{float: left;height: 50px;width: 300px;background-color: red;}
</style>
<body><div class="parent"><div class="child"></div></div>
</body>

在这里插入图片描述

这是因为父元素高度计算时，不会加上设置了浮动属性的子元素。

3）解决方案：创建BFC盒子
方案一：给父元素加上overflow:不为visible的属性。这是父元素为BFC,如下所示：
在这里插入图片描述
方案二：父元素，display属性为inline-block、table-cell、table-caption、flex、inline-flex。
方案三：父元素，position属性为absolute或fixed的时候。
方案四：父元素，float不为none。

相关文章：

前端进阶Html+css09----BFC模型

1.什么是BFC模型 全称是&#xff1a;Block formatting context&#xff08;块级格式化上下文&#xff09;&#xff0c;是一个独立的布局环境&#xff0c;不受外界的影响。 2.FC,BFC,IFC 元素在标准流里都属于一个FC&#xff08;Formatting Context&#xff09;。 块级元素的布…...

编程日记 2023/8/24 17:31:00

重排链表(C语言)

题目&#xff1a; 示例&#xff1a; 思路&#xff1a; 这题我们将使用栈解决这个问题&#xff0c;利用栈先进后出的特点&#xff0c;从链表的中间位置进行入栈&#xff0c;寻找链表的中间位置参考&#xff1a;删除链表的中间节点&#xff0c;之后从头开始进行连接。 本题使用…...

编程日记 2023/8/24 17:29:59

el-table动态合并单元格

el-table使用这个方法合并单元格&#xff0c;:span-method“hbcell” <el-table size"small" :data"table.data" border empty-text"暂无数据" :cell-style"cellStyle" :header-cell-style"tableHeaderColor":span-meth…...

编程日记 2023/8/24 17:28:58

html元素

文章目录 html基本结构属性语义化为什么要语义化 示例head中属性样式一些概念块级元素与行级元素空白折叠 html编程没有css的html显示逻辑 html基本结构 html基本单元就是元素&#xff0c;每个元素有标记和属性&#xff0c;如&#xff1a; <a href"...">www&…...

编程日记 2023/8/24 17:27:56

push github

一、生成密钥 打开git bash执行下面指令&#xff0c;Enter下一步Enter下一步..生成ssh key 密钥&#xff1b; ssh-keygen -t rsa 二、 复制公共密钥到git hub 登录github&#xff0c;在选项setting >> SSH and GPG key >> add new ssh添加刚才的公钥地址即可 验证…...

编程日记 2023/8/24 17:26:55

iFluor 594 Styramide是一种荧光染料，常用于生物分子标记和成像

试剂 | 基础知识概述&#xff08;部分&#xff09;: 中文名称&#xff1a;Alexa Fluor 594酪Styramide 分子量&#xff1a;1341.71 胺的优异替代品 100 Slides 英文名称&#xff1a;iFluor 594 Ex (nm)&#xff1a;588 Em (nm)&#xff1a;604 规格标准&#xff1a;1g&am…...

编程日记 2023/8/24 17:25:54

动态规划入门之01背包变形嗑药

P1802 5 倍经验日 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 嗑药固然可耻&#xff0c;但是能让你快速变强 --鲁迅 手动滑稽&#xff0c;话归正题 动态规划之背包入门01背包模板_爱莉我老婆的博客-CSDN博客 这是01背包的模板&#xff0c;没看的可以去看看。 我们把…...

编程日记 2023/8/24 17:24:53

数据结构——栈和队列OJ题

栈和队列小提升&#xff01; 前言一、用队列实现栈队列接口实现&#xff08;1&#xff09;栈的接口定义&#xff08;2&#xff09;栈的初始化&#xff08;3&#xff09;入栈函数的定义&#xff08;4&#xff09;出栈函数的定义&#xff08;5&#xff09;查找栈顶元素&#xff0…...

编程日记 2023/8/24 17:23:51

同态排序算法

参考文献&#xff1a; [Batcher68] Batcher K E. Sorting networks and their applications[C]//Proceedings of the April 30–May 2, 1968, spring joint computer conference. 1968: 307-314. [SV11] Smart, N.P., Vercauteren, F.: Fully homomorphic SIMD operations. IA…...

编程日记 2023/8/24 17:22:50

“深入探索JVM内部机制：解析Java虚拟机的工作原理“

标题&#xff1a;深入探索JVM内部机制&#xff1a;解析Java虚拟机的工作原理 摘要&#xff1a;本文将介绍Java虚拟机&#xff08;JVM&#xff09;的工作原理&#xff0c;包括类加载、内存管理、垃圾回收和字节码执行等方面。通过深入理解JVM的内部机制&#xff0c;开发人员可以…...

编程日记 2023/8/24 17:21:46

为应用程序接入阿里云CDN优化网站访问速度

文章目录 1.KodCloud云盘系统接入CDN之前的效果2.配置KodCloud云盘接入CDN加速器2.1.添加CDN域名2.2.配置域名信息2.3.CDN推荐配置设置2.4.CDN加速器配置完成 3.配置云解析DNS增加CDN域名的解析4.为CDN加速器配置HTTPS5.验证网站是否接入CDN6.访问应用程序观察请求速度7.观察CD…...

编程日记 2023/8/24 17:20:44

索引设计规范

索引是帮助数据库高效获取数据的数据结构。索引是加速查询的常用技术手段。在设计索引时&#xff0c;要遵循索引设计规范&#xff0c;避免不必要的踩坑。 【推荐】索引存储结构推荐BTREE InnoDB和MyISAM存储引擎表&#xff0c;索引类型必须为BTRER&#xff0c;MEMORY表可以根…...

编程日记 2023/8/24 17:19:43

Appium 2安装与使用java对Android进行自动化测试

文章目录 1、Appium 2.1安装1.1、系统要求1.2、安装Appium2.1服务1.3、安装UiAutomator2驱动1.4、安装Android SDK platform tools1.5、下载OpenJDK 2、Android自动代码例子2.1、安装Android自动化测试元素定位工具Appium Inspector2.2、编写android app自动化测试代码和使用ex…...

编程日记 2023/8/24 17:18:42

小程序运营方式有哪些？如何构建小程序运营框架？

​如今&#xff0c;每个企业基本都做过至少一个小程序&#xff0c;但由于小程序本身不具备流量、也很少有自然流量&#xff0c;因此并不是每个企业都懂如何运营小程序。想了解小程序运营方式方法有哪些&#xff1f; 在正式运营小程序前&#xff0c;了解小程序的功能与企业实际经…...

编程日记 2023/8/24 17:17:40

【golang】for语句和switch语句

使用携带range子句的for语句时需要注意哪些细节&#xff1f; numbers1 : []int{1, 2, 3, 4, 5, 6} for i : range numbers1 {if i 3 {numbers1[i] | i} } fmt.Println(numbers1)这段代码执行后会打印出什么内容&#xff1f; 答案&#xff1a;[1 2 3 7 5 6] 当for语句被执行…...

编程日记 2023/8/24 17:16:39

三、数据库索引

1、索引介绍 索引是一种用于快速查询和检索数据的数据结构&#xff0c;其本质可以看成是一种排序好的数据结构。 常见的索引结构有&#xff1a;B数&#xff0c;B树&#xff0c;Hash和红黑树等。在MySQL中&#xff0c;无论是 InnoDB还是MyISAM&#xff0c;都使用了B树作为索引…...

编程日记 2023/8/24 17:15:38

长时间带什么耳机最舒服，分享长时间佩戴舒服的耳机推荐

时代在进步&#xff0c;科技在不断革新。近年来&#xff0c;一种崭新的耳机——骨传导耳机&#xff0c;如火如荼地进驻耳机市场&#xff0c;引起一阵热潮。不论是平日里的工作出勤还是运动时的挥洒汗水&#xff0c;相比传统耳机&#xff0c;骨传导耳机无疑更加贴合现代生活的需…...

编程日记 2023/8/24 17:14:37

Yolov8小目标检测（1）

💡💡💡本文目标：通过原始基于yolov8的红外弱小目标检测，训练得到初版模型，进行问题点分析； 💡💡💡Yolo小目标检测，独家首发创新（原创），适用于Yolov5、Yolov7、Yolov8等各个Yolo系列，专栏文章提供每一步步骤和源码，带你轻松实现小目标检测涨点 💡💡…...

编程日记 2023/8/24 17:13:36

GPS定位漂移问题分析

有很多种因素会影响到GPS的准确率&#xff0c;以下是一个GPS误差引入简表&#xff1a; l 卫星时钟误差&#xff1a;0-1.5米 l 卫星轨道误差&#xff1a;1-5米 l 电离层引入的误差&#xff1a;0-30米 l 大气层引入的误差&#xff1a;0-30米 l 接收机…...

编程日记 2023/8/24 17:12:35

前端简介（HTML+CSS+JS）

学习Django过程中遇到一些前端相关的内容&#xff0c;于是整理了一下相关概念。 前端开发是创建WEB页面或APP等前端界面呈现给用户的过程。 如果只是想要入门前端&#xff0c;只要学习网页三剑客(HTML、CSS、JavaScript)即可。 如果把网页比喻成一个房子&#xff0c;HTML就是…...

编程日记 2023/8/24 17:11:34

Linux环境下KingbaseES（人大金仓）数据库的自动化部署与配置实践

1. 为什么需要自动化部署KingbaseES&#xff1f; 第一次手动部署KingbaseES数据库的经历让我记忆犹新。那天我在机房折腾了整整6个小时&#xff0c;光是反复输入各种命令就让人抓狂&#xff0c;更别提中间因为权限问题重装了三次。相信很多DBA同行都有过类似的痛苦体验——手动…...

编程新知 2026/5/19 7:51:03

Lingtrain Aligner：如何让多语言文本对齐变得像拼图一样简单？

Lingtrain Aligner&#xff1a;如何让多语言文本对齐变得像拼图一样简单&#xff1f; 【免费下载链接】lingtrain-aligner Lingtrain Aligner — ML powered library for the accurate texts alignment. 项目地址: https://gitcode.com/gh_mirrors/li/lingtrain-aligner …...

编程新知 2026/5/19 7:42:19

创业公司的落户生根企业培养成为银行的重要招待客户 银行代表政府部门的重要商业交易方式 工作是工程师和一线城市外来务工人口的市民安全保护凭证 城市人口流动严重影响市场监管部门的调查小组分布方向和具体考察

-程序员编程助手科技股份有限责任公司创业公司的落户生根企业培养成为银行的重要招待客户 银行代表政府部门的重要商业交易方式 工作是工程师和一线城市外来务工人口的市民安全保护凭证 城市人口流动严重影响市场监管部门的调查小组分布方向和具体考察要求 创业公司的落户生根企…...

编程新知 2026/5/19 7:02:15

从源头到治理：光伏并网逆变器直流分量抑制技术全解析

1. 光伏并网逆变器直流分量问题概述 第一次在光伏电站现场看到直流分量超标告警时&#xff0c;我盯着监控屏幕愣了半天。作为从业多年的光伏系统工程师&#xff0c;我深知这个看似微小的技术指标背后隐藏着多大的隐患。直流分量就像电网中的"隐形杀手"&#xff0c;它…...

编程新知 2026/5/19 6:33:13

高通手机刷机救砖不求人：搞懂这10个关键分区，自己就能救活黑砖

高通手机刷机救砖实战指南&#xff1a;10个致命分区解析与精准修复 当你的爱机突然变成一块"黑砖"&#xff0c;屏幕再无反应&#xff0c;甚至连充电指示灯都彻底熄灭时&#xff0c;那种绝望感每个玩机爱好者都深有体会。不同于普通的系统崩溃&#xff0c;黑砖状态意…...

编程新知 2026/5/19 5:45:07

ARMv9 CPYEN指令：内存拷贝优化技术详解

1. ARM内存拷贝指令CPYEN深度解析 在ARMv9架构中&#xff0c;内存拷贝操作通过专门的硬件指令得到了显著优化。CPYEN指令作为FEAT_MOPS特性的一部分&#xff0c;采用创新的三阶段流水线设计来提升数据传输效率。对于需要频繁处理内存块操作的系统开发者来说&#xff0c;理解这条…...

编程新知 2026/5/19 5:38:42

【免费下载】 MATLAB从入门到精通教程 - PDF文档下载指南【matlab下载】

MATLAB从入门到精通教程 - PDF文档下载指南 欢迎来到《MATLAB从入门到精通教程》的资源页面&#xff01;本资源旨在为所有想要深入学习MATLAB编程语言的学者和工程师提供一份详尽、全面的学习资料。这份权威的PDF文档是英文版&#xff0c;非常适合希望掌握MATLAB核心功能及高级…...

编程新知 2026/5/19 5:21:38

远程控制软件哪个好 远程控制软件推荐用无界趣连2.0

不管是想用手机串流玩端游&#xff0c;还是朋友、家人遇到设备难题需要免费远程协助&#xff0c;一款好用的远程控制软件都能帮上大忙。想找到一款靠谱的远程控制软件并不容易&#xff0c;推荐无界趣连2.0&#xff0c;不管是游戏娱乐还是应急协助&#xff0c;都能轻松满足需求&…...

编程新知 2026/5/19 5:08:55

复古CRT电视改造：用RF调制器连接树莓派与现代电脑

1. 项目概述&#xff1a;当太空时代美学遇见现代计算几年前&#xff0c;我在一个复古科技展上第一次见到JVC Videosphere&#xff0c;那个圆润的球面屏幕和未来感十足的造型瞬间击中了我。它诞生于上世纪70年代&#xff0c;是那个太空竞赛黄金时期工业设计的缩影。但和大多数老…...

编程新知 2026/5/19 4:54:38

Discourse Docker持续集成：自动化构建与部署完整指南 [特殊字符]

Discourse Docker持续集成&#xff1a;自动化构建与部署完整指南 &#x1f680; 【免费下载链接】discourse_docker A Docker image for Discourse 项目地址: https://gitcode.com/gh_mirrors/dis/discourse_docker Discourse Docker持续集成是现代论坛部署的最佳实践&a…...

编程新知 2026/5/19 4:19:00