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

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

news 2025/7/1 9:55:14

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

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/6/21 5:42:11

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/6/28 8:53:11

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/6/28 14:27:12

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2025/7/1 5:43:01

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/6/26 1:51:25

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/6/21 12:21:14

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2025/6/21 18:09:34

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/6/15 5:19:16

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/6/24 0:45:23

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2025/6/26 10:01:28