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

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

news 2026/4/2 8:28:56

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

广州邮科如何为你的系统选择合适的在线式充电机？

设备运行最怕断电。在线式充电机&#xff0c;就是那个能让设备“永不断电”的充电神器。今天咱们用大白话&#xff0c;把它讲清楚。它到底是什么&#xff1f;简单说&#xff0c;就是能一边给设备供电&#xff0c;一边给电池充电的智能设备。设备不用停机&#xff0c;电池也能充…...

编程新知 2026/4/2 8:11:56

Tencent Hunyuan3D-1.0日志轮转配置：防止磁盘空间耗尽的日志管理方案

Tencent Hunyuan3D-1.0日志轮转配置&#xff1a;防止磁盘空间耗尽的日志管理方案 【免费下载链接】Hunyuan3D-1 腾讯开源的Hunyuan3D-1项目&#xff0c;创新提出两阶段3D生成方法&#xff0c;实现快速、高质量的文本到3D和图像到3D转换&#xff0c;融合Hunyuan-DiT模型&#xf…...

编程新知 2026/4/2 5:25:48

SEO_ 揭秘影响搜索引擎排名的核心SEO因素

SEO的核心因素解析&#xff1a;提升搜索引擎排名的关键路径 在当今数字化时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已经成为每个网站和企业获取有效流量的重要途径。究竟有哪些核心因素影响搜索引擎的排名呢&#xff1f;本文将深入探讨这些核心SEO因素&#x…...

编程新知 2026/4/2 4:39:28

如何用UAV-Flow实现语音控制无人机？手把手教你搭建环境与避坑指南

如何用UAV-Flow实现语音控制无人机&#xff1f;从环境搭建到实战避坑全指南 当无人机遇上自然语言处理&#xff0c;会擦出怎样的火花&#xff1f;去年接触UAV-Flow时&#xff0c;我正为一个农业巡检项目头疼——传统摇杆控制需要专业飞手&#xff0c;而农户们更习惯说"绕着…...

编程新知 2026/4/2 3:38:16

论文AIGC全红99%怎么救？2026实测Gemini去痕术：3组指令集联合3大工具，稳稳拉回10%安全线

视角重构&#xff0c;打破“平铺直叙”的机械感 AI生成的最大特征是“正确但平庸的上帝视角”。要ai降ai&#xff0c;第一步不是改词&#xff0c;而是强行植入一个具有批判性的“人类观察者”视角&#xff0c;迫使模型重组叙事逻辑。 核心原理&#xff1a;通过引入“辩证法”…...

编程新知 2026/4/2 1:03:55

别再让MCSDK电流环PI参数拖后腿了！手把手教你从电机参数到代码配置的完整调参流程

从电机参数到代码实现&#xff1a;MCSDK电流环PI参数优化实战指南 在电机控制领域&#xff0c;电流环的性能直接影响着整个系统的响应速度、稳定性和能效表现。许多工程师在使用STM32的MCSDK进行FOC开发时&#xff0c;往往满足于"电机能转"的基本状态&#xff0c;却忽…...

编程新知 2026/4/2 0:28:58

西门子SMART200 PLC梯形图，SR20，昆仑通态触摸屏组态画面，常压电热水锅炉比例模糊...

西门子SMART200 PLC梯形图&#xff0c;SR20&#xff0c;昆仑通态触摸屏组态画面&#xff0c;常压电热水锅炉比例模糊控制追目标温度&#xff0c;PLC源触摸屏源CAD原理图图纸全套常压电热水锅炉那种“冰火两重天”的加热体验谁懂&#xff1f;茶水间或者小烘干池边上&#xff0c;…...

编程新知 2026/4/1 23:50:33

C语言基础：LiuJuan20260223Zimage嵌入式开发入门

C语言基础&#xff1a;LiuJuan20260223Zimage嵌入式开发入门 1. 学习目标与前置知识 如果你是刚开始接触嵌入式开发的C语言初学者&#xff0c;这篇文章就是为你准备的。我们将从最基础的C语言语法开始&#xff0c;一步步带你了解如何在嵌入式环境中使用C语言进行开发。不需要…...

编程新知 2026/4/1 23:28:18

掌握5个核心配置技巧：OpenCore-Configurator从入门到专家

掌握5个核心配置技巧&#xff1a;OpenCore-Configurator从入门到专家 【免费下载链接】OpenCore-Configurator A configurator for the OpenCore Bootloader 项目地址: https://gitcode.com/gh_mirrors/op/OpenCore-Configurator OpenCore-Configurator&#xff08;简称…...

编程新知 2026/4/1 20:52:04

管道应力理论（应用）

本文仅对管道应力涉及的理论知识&#xff08;偏向于应用&#xff09;进行简单介绍。管道应力&#xff1a;对管道应力校核是为了防止管壁内应力过大对管道造成破坏&#xff0c;不同的荷载引起不同类型的应力&#xff0c;在实际工程应用中&#xff0c;一般分为三种&#xff1a;一…...

编程新知 2026/4/1 19:21:07