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

如何理解BFC、开启BFC、BFC解决哪些问题

news 2025/7/7 12:42:40

1.BFC 概念

BFC 英文名为 Block Formatting Context (块级格式化上下文)
具体可查看
MDN

2.BFC的作用

  1. 元素开启BFC后，子元素不会发生margin塌陷问题
  2. 元素开启BFC后，子元素浮动，元素不发生高度塌陷
  3. 元素开启BFC后，该元素不被其他元素浮动遮挡

3.如何开启BFC

1.根元素<html>默认开启BFC
2.浮动元素
3.绝对、固定定位
4.overflow的值为 hidden、scroll、auto
5.行内块元素
6.display:table;或者display:flow-root

演示

此处我们就margin塌陷问题，展示开启BFC的效果
1.首先制造margin塌陷现象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.outer{width: 400px;background-color: gray;}.inner{width: 100px;height: 100px;margin: 50px;}.inner1{background-color: orange;}.inner2{background-color: green;}.inner3{background-color: skyblue;}</style>
</head>
<body><div class="outer"><div class="inner inner1">1</div><div class="inner inner2">2</div><div class="inner inner3">3</div></div>
</body>
</html>

效果
在这里插入图片描述
在这里插入图片描述
2.父元素开启BFC，解决子元素margin塌陷问题
在原有代码做出的修改

.outer{width: 400px;background-color: gray;/* 开启BFC *//* float: left; *//* position: absolute; *//* position: fixed; *//* overflow: hidden; *//* overflow: scroll; *//* overflow: auto; *//* display: inline-block; *//* display: table; */display: flow-root;}

效果
在这里插入图片描述
在这里插入图片描述
其他两种情况，大家可以自行尝试

相关文章：

如何理解BFC、开启BFC、BFC解决哪些问题

1.BFC 概念 BFC 英文名为 Block Formatting Context (块级格式化上下文) 具体可查看 MDN 2.BFC的作用 元素开启BFC后&#xff0c;子元素不会发生margin塌陷问题元素开启BFC后&#xff0c;子元素浮动&#xff0c;元素不发生高度塌陷元素开启BFC后&#xff0c;该元素不被其他元…...

编程日记 2023/10/15 1:47:02

3D包容盒子

原理简述 包围体&#xff08;包容盒&#xff09;是一个简单的几何空间&#xff0c;里面包含着复杂形状的物体。为物体添加包围体的目的是快速的进行碰撞检测或者进行精确的碰撞检测之前进行过滤&#xff08;即当包围体碰撞&#xff0c;才进行精确碰撞检测和处理&#xff09;。包…...

编程日记 2023/10/15 1:45:01

用 Three.js 创建一个酷炫且真实的地球

接下来我会分步骤讲解&#xff0c;在线示例在数字孪生平台。 先添加一个球体 我们用threejs中的SphereGeometry来创建球体&#xff0c;给他贴一张地球纹理。 let earthGeo new THREE.SphereGeometry(10, 64, 64) let earthMat new THREE.MeshStandardMaterial({map: albed…...

编程日记 2023/10/15 1:43:59

【数据结构】线性表与顺序表

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈Java &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 线性表与顺序表 1. 线性表2. 顺序表2.1 …...

编程日记 2023/10/15 1:42:59

ChatGPT

chatgpt使用地址 https://mycaht.top/#/chat 申请内测免费key https://github.com/chatanywhere/GPT_API_free 设置 接口地址设置改成 https://api.chatanywhere.com.cnAPI Key设置成申请出来的免费key 开始聊天...

编程日记 2023/10/15 1:41:58

矿区井下智慧用电安全监测解决方案

一、背景 矿区井下作业具有复杂的环境和较高的危险性&#xff0c;对于用电安全的要求尤为严格。传统的管理模式和监测方法往往无法实时、准确地掌握井下用电情况&#xff0c;对安全隐患的排查与预防存在一定局限性。因此&#xff0c;引入智慧用电安全监测解决方案&#xff…...

编程日记 2023/10/15 1:40:57

网站列表页加密：三次请求后返回内容多\r

一、抓包第一次请求 url aHR0cDovL2N5eHcuY24vQ29sdW1uLmFzcHg/Y29saWQ9MTA抓包&#xff0c;需要清理浏览器cookie&#xff0c;或者无痕模式打开网址&#xff0c;否则返回的包不全&#xff0c;依照下图中的第一个包进行requests请求 第一次请求后返回 <!DOCTYPE html>…...

编程日记 2023/10/15 1:39:56

12.JVM

一.JVM类加载机制:把类从硬盘文件加载到内存中 1.java文件,编写时是一个.java文件,编译后现成一个.class的字节码文件,运行的时候,JVM就会读取.class文件,放到内存中,并且构造类对象. 2.类加载流程: a.加载:找到.class文件,打开文件,读取内容,尝试解析文件内容. b.验证:检查…...

编程日记 2023/10/15 1:38:55

关于网络协议的若干问题(四)

1、QUIC 是一个精巧的协议&#xff0c;它有哪些特性&#xff1f; 答&#xff1a;QUIC 还有其他特性&#xff0c;一个是快速建立连接。另一个是拥塞控制&#xff0c;QUIC 协议当前默认使用了 TCP 协议的 CUBIC&#xff08;拥塞控制算法&#xff09;。 CUBIC 进行了不同的设计&…...

编程日记 2023/10/15 1:37:54

opencv图像卷积操作和常用的图像滤波函数

文章目录 opencv图像卷积操作原理&#xff0c;opencv中常用的图像滤波函数一、图像卷积操作原理&#xff1a;1、卷积操作原理图&#xff1a; 二、opencv常用的图像滤波函数&#xff1a;这些函数的主要作用是对图像进行平滑处理或去除噪声(核心目的是减少图像中的噪声&#xff0…...

编程日记 2023/10/15 1:36:53

习题1. 31

话不多说 先上代码 (defn product [ term a nxt b](defn iter [a result](if (> a b)1 (* (term a) (iter (nxt a) result))))(iter a 1)) 跟习题1.30比较起来&#xff0c;就是两个地方不同 乘法不能乘0 必须是1。难度来讲&#xff0c;跟1.30难度是一样的。增加了迭代过…...

编程日记 2023/10/15 1:35:52

见微知著：从企业售后技术支持看云计算发展

作者&#xff1a;余凯 售后业务中的细微变化 作为阿里云企业容器技术支持的一员&#xff0c;每天会面对全球各地企业级客户提出的关于容器的各种问题&#xff0c;通过这几年的技术支持的经历&#xff0c;逐步发现容器问题客户的一些惯性&#xff0c;哪些是重度用户&#xff0…...

编程日记 2023/10/15 1:34:51

C++笔记之如何给 `const char*` 类型变量赋值

C笔记之如何给 const char* 类型变量赋值 code review! 文章目录 C笔记之如何给 const char* 类型变量赋值1.在C中&#xff0c;如果你要给一个 const char* 变量赋值&#xff0c;你通常有几种方法来做这件事&#xff0c;具体取决于你的需求。下面是一些常见的方法&#xff1a;…...

编程日记 2023/10/15 1:33:50

9.Linear Maps

线性映射 线性映射是将向量作为输入并产生一些新向量作为输出的转换。 从坐标定义开始(数组)&#xff0c;再到2&#xff0c;3&#xff0c;并展示它们是如何关联的 线性映射的坐标表示最终是矩阵&#xff0c; 1.坐标定义&#xff08;数组&#xff09; 列向量是向量的坐标表示…...

编程日记 2023/10/15 1:32:49

大数据Doris（十）：添加BE步骤

文章目录 添加BE步骤 一、使用mysql连接 二、​​​​​​​添加be...

编程日记 2023/10/15 1:31:48

Vue2 +Element UI 表格行合并

如果相邻数据是一致的&#xff0c;则单元格的行合并,指定需要合并的列&#xff0c;下面我是指定合并了分类和类型这两列。 先看效果 Element UI为我们的<el-table>提供了一个属性span-method&#xff1a;合并行或列的计算方法 下面是一个示例: html部分 - 主要是在表上指…...

编程日记 2023/10/15 1:30:47

SuperEdge易学易用系列-一键搭建SuperEdge集群

条件说明&#xff1a; 系统 公网IP 内网IP 服务器所在地 K8S版本 Centos7.9 114.116.101.254 192.168.0.245 北京 v1.22.6 Centos7.9 119.8.1.96 192.168.0.83 香港 v1.22.6 Ubuntu22 94.74.108.152 192.168.0.154 纽约 v1.22.6 1. 开始部署 1.1 两条指令从零搭建一个边缘集…...

编程日记 2023/10/15 1:29:46

农场养殖农产品商城小程序搭建

鸡鸭羊牛鱼养殖用户不少&#xff0c;其规模也有大有小&#xff0c;尤其对一些生态养殖企业&#xff0c;其产品需求度更高&#xff0c;同时他们也有实际的销售需求。 由于具备较为稳定的货源&#xff0c;因此大规模多规格销售属性很足。 通过【雨科】平台搭建农场养殖商城&…...

编程日记 2023/10/15 1:27:44

大语言模型之十七-QA-LoRA

由于基座模型通常需要海量的数据和算力内存&#xff0c;这一巨大的成本往往只有巨头公司会投入&#xff0c;所以一些优秀的大语言模型要么是大公司开源的&#xff0c;要么是背后有大公司身影公司开源的&#xff0c;如何从优秀的开源基座模型针对特定场景fine-tune模型具有广大的…...

编程日记 2023/10/15 1:25:41

UML组件图综合指南：设计清晰、可维护的软件系统

介绍&#xff1a; UML&#xff08;Unified Modeling Language&#xff09;组件图是软件系统设计中的重要工具&#xff0c;用于描绘系统的物理结构和组件之间的关系。在软件工程中&#xff0c;通过创建清晰的组件图&#xff0c;团队能够更好地理解系统的模块化结构和组织关系&a…...

编程日记 2023/10/15 1:24:40

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2025/7/7 1:45:57

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/6/20 13:00:49

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/6/17 17:52:51

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/7/5 22:21:58

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2025/7/6 22:49:35

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/7/6 19:34:45

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/7/6 6:11:38

【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解

一、前言 在HarmonyOS 5的应用开发模型中&#xff0c;featureAbility是旧版FA模型&#xff08;Feature Ability&#xff09;的用法&#xff0c;Stage模型已采用全新的应用架构&#xff0c;推荐使用组件化的上下文获取方式&#xff0c;而非依赖featureAbility。 FA大概是API7之…...

编程新知 2025/7/6 20:38:30

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源&#xff0c;提供了很全面的思路&#xff0c;减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接&#xff1a;https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架&#xff1a; 代码框架结构&#xff1a;readme有…...

编程新知 2025/7/7 5:58:58

spring boot使用HttpServletResponse实现sse后端流式输出消息

1.以前只是看过SSE的相关文章&#xff0c;没有具体实践&#xff0c;这次接入AI大模型使用到了流式输出&#xff0c;涉及到给前端流式返回&#xff0c;所以记录一下。 2.resp要设置为text/event-stream resp.setContentType("text/event-stream"); resp.setCharacter…...

编程新知 2025/7/5 16:49:08