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

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

news 文章来源：https://blog.csdn.net/weixin_43795761/article/details/132178272 2024/12/29 12:51:36

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

List与String数组互转

一.List 转为 String 数组 1.使用toArray方法 public static void main(String[] args) {List<String> list Lists.newArrayList("1","2","3");// Java6以前版本String[] str1 list.toArray(new String[list.size()]);// Java6以后版本…...

编程日记 2023/8/24 17:10:33

MySQL中的数据类型

文章目录 1 常见的数据类型2 整数类型2.1 属性 M2.2 属性 UNSIGNED2.3 属性 ZEROFILL2.4 整数类型的适用场景 3 浮点类型4 定点类型5 位类型6 日期与时间类型6.1 YEAR 类型6.2 DATE 类型6.3 TIME 类型6.4 DATETIME 类型6.5 TIMESTAMP 类型 1 常见的数据类型 类型类型分类整数类…...

编程日记 2023/8/24 17:09:30

python多任务

​ 一、多任务 1.1 概念 多任务就是指&#xff1a;同一时间能执行多个任务。比方我们的电脑能一边QQ聊天&#xff0c;一边写论文&#xff0c;还能听歌。 1.2 多任务的优势&#xff1a; 多任务的最大好处是 充分利用CPU资源&#xff0c;提高程序的执行效率。 1.3 多任务的两种表…...

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

c语言 - inline关键字（内联函数）

概念 在编程中&#xff0c;inline是一个关键字&#xff0c;用于修饰函数。inline函数是一种对编译器的提示&#xff0c;表示这个函数在编译时应该进行内联展开。 内联展开是指将函数的代码插入到调用该函数的地方&#xff0c;而不是通过函数调用的方式执行。这样可以减少函数调…...

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

如何在Ubuntu 18.04上安装PHP 7.4并搭建本地开发环境

引言 PHP是一种流行的服务器脚本语言&#xff0c;用于创建动态和交互式web页面。开始使用你选择的语言是学习编程的第一步。 本教程将指导您在Ubuntu上安装PHP 7.4&#xff0c;并通过命令行设置本地编程环境。您还将安装依赖管理器Composer&#xff0c;并通过运行脚本来测试您…...

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

狭义相对论

文章目录 一、为什么光速不变&#xff1f;二、为什么爱因斯坦坚信“相对性原理”三、逻辑和数学显威力&#xff0c;狭义相对论时空变换&#xff08;洛伦兹变换&#xff09;推导四、新时空变换带来的新时空观1、有关相对论时间的“傻问题”2、关于相对论的“怪问题”3、关于“双…...

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

仓库使用综合练习

目录 1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘。 2、安装搭建私有仓库 Harbor 3、编写Dockerfile制作Web应用系统nginx镜像&#xff0c;生成镜像nginx:v1.1&#xff0c;并推送其到私有仓库。 4、Dockerfile快速搭建自己专属的LAMP环境&#xff0c;生…...

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

如何在前端实现WebSocket发送和接收TCP消息（多线程模式)

目录 第一步&#xff1a;创建WebSocket连接第二步&#xff1a;监听WebSocket事件第三步&#xff1a;发送消息第四步&#xff1a;后端处理函数说明 当在前端实现WebSocket发送和接收TCP消息时&#xff0c;可以使用以下步骤来实现多线程模式。本文将详细介绍如何在前端实现WebSoc…...

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

VB.NET通过VB6 ActiveX DLL调用PowerBasic及FreeBasic动态库

前面说的Delphi通过Activex DLL同时调用PowerBasic和FreeBasic写的DLL&#xff0c;是在WINDOWS基础平台上完成的。 而 .NET平台是架在WINDOWS基础平台之上的&#xff0c;它的上面VB.NET或C#等开发的APP程序&#xff0c;下面写一下用VB.NET&#xff0c;通过VB6注册的Activex DLL…...

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

怎样不引入图片实现前端css实现x关闭按钮

首先初始化一个dom节点 <span class"closeButton"></span>设置样式 .closeButton {width: 12px;height: 12px;margin-top: 5px;margin-right: 5px;float: right;cursor: pointer;color: #105c86;}通过伪元素before after画两条线 margin-left 的设置是…...

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

如何知道wordpress/长沙专业竞价优化公司

Linux内核学习--内存寻址 1.内存寻址的基本流程 首先&#xff0c;一般的书中或者博客中&#xff0c;在介绍Linux内核的时候&#xff0c;首先都会介绍Linux的内存寻址&#xff0c;这样的一块知识和程序的关联在哪里&#xff0c;下面的内容就首先的讨论一下这个问题。 在我们书写…...

编程日记 2024/12/29 11:18:49

北京网站建设hj华网天下/灰色词秒收录代发

大家平时都是怎么切换后台运行的软件的呢&#xff1f;如果是通过鼠标点击任务栏的话,那真的是太慢了,下面介绍几个快速切换后台运行的软件的快捷键。AltTab和AltShiftTab(推荐):按住Alt键不放,按下Tab向前选择打开的软件窗口,按下ShiftTab向后选择打开的软件窗口,松开Alt键即可…...

编程日记 2024/12/29 6:34:13

如何通过网站做调查问卷/企业网络

上午同事问我为什么flex盒子的高度被撑开了&#xff0c;但是并没有撑开到子元素高度的和(撑开高度小于子元素高度和)。本着遇到奇怪的CSS问题就模仿重现一次问题的原则&#xff0c;于是...终于...最后发现flex布局撑开的最大高度不会大于父级flex元素设置的高度&#xff01;代码…...

编程日记 2024/12/29 5:52:22

手机网站建设新闻/百度地图官网2022最新版下载

在Mac/Linux/Windows上编译corefx遇到的问题及解决方法参考文章&#xff1a; &#xff08;1&#xff09;在Mac/Linux/Windows上编译corefx遇到的问题及解决方法 &#xff08;2&#xff09;https://www.cnblogs.com/dudu/p/build-corefx-on-mac-linux-windows.html 备忘一下。…...

编程日记 2024/12/29 2:51:48

信息手机网站模板下载软件/百度如何搜索关键词

js监听鼠标滚动事件并判断鼠标滚轮是向下还是向上。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>判断鼠标滚动向下还是向上</title><style>.box {width: 600px;height: 600px;border…...

编程日记 2024/12/29 2:48:46

网站更新内容怎么做/站长权重

在实际编程过程中经常需要把任务包装成多进程或者多线程&#xff0c;多进程和多线程的区别在于多线程是内存共享、变量等共享的&#xff0c;多进程的进程间是独立运行的&#xff0c;所以创建多线程还是多进程取决于不同的需求。python中因为有全局锁的机制&#xff0c;所以在py…...

编程日记 2024/12/29 1:51:21