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

初识BFC

news 2026/2/8 14:04:00

初识BFC

先说如何开启BFC：

1.设置display属性：inline-block，flex，grid

2.设置定位属性：absolute，fixed

3.设置overflow属性：hidden，auto，scroll

4.设置浮动（不推荐使用）

值得注意的是：body本身就是BFC元素。

另外，推荐使用*overflow: hidden;开启BFC，因为代价最小，不会像设置定位和浮动一样影响布局。*

元素开启BFC的作用：

为了方便，下面举例说明，都是通过设置overflow: hidden;开启BFC

1. 不会与浮动元素重叠

html代码如下：

<body><div class="div1">1</div><div class="div2">2</div>
</body>

css代码如下：

*{margin: 0;padding: 0;
}
.div1 {width: 150px;height: 150px;background-color: yellow;
}
.div2 {width: 180px;height: 180px;background-color: orange;
}

定义了两个div盒子，确定他们的大小和背景颜色。

请添加图片描述

给div1设置左浮动后，它脱离了文档流，不占据位置了，所以和div2重叠。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-859PryRw-1678067988404)(%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/1%201.png)]

我们给div2设置overflow: hidden; 后，div2变为BFC元素，不再与div1重叠。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b2gI34YS-1678067988405)(%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/2.png)]

2. 解决高度塌陷的问题

html代码如下：

<div class="box"><div class="div1"></div>
</div>

css代码如下：

.box{background-color: skyblue;
}
.div1{width: 150px;height: 150px;background-color: yellow;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AZJGe9Y6-1678067988407)(%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/6.png)]

给div1设置左浮动后，发现页面中只显示div1。但按理来说box本身是块级元素，应独占一行，这是怎么回事？

原来是因为box本身没有高度，它是靠div1的高度撑起来的。给div1设置浮动后，脱离了文档流，所以box的高度变为0，出现了高度塌陷的问题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UU9oTUgq-1678067988409)(%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/4.png)]

而我们让box变为BFC元素后，就有了高度。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zrI6Njg7-1678067988410)(%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/6%201.png)]

3. 解决外边距重叠的问题

什么是外边距重叠？

位于同一BFC的上下两个块级元素，如果各自设置相对的外边距，会导致外边距折叠（也叫重叠），从而使两个元素之间的距离为边距较大的那个值。

html代码如下：

<div class="div1">1</div>
<div class="div2">2</div>

css代码如下：

* {margin: 0;padding: 0;
}.div1 {width: 150px;height: 150px;background-color: orange;
}.div2 {width: 150px;height: 150px;background-color: skyblue;
}

定义了两个div盒子，确定他们的大小和背景颜色。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pmu7E8iQ-1678067988411)(%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/1%202.png)]

然后给第一个盒子设置margin-bottom:100px; ，第二个盒子设置margin-top:120px ，按照常规理解，他们应该会相距220px。

但实际上，他们的距离相差120px。这是因为div1和div2的父元素都是body，而body本身就是BFC元素，位于同一BFC区域的div元素设置相对的外边距，所以发生了外边距重叠。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6MW2vYVO-1678067988412)(%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/2%201.png)]

那如何解决外边距重叠的问题呢？位于同一BFC区域的块级元素才可能发生外边距重叠，那我们想办法让他们不在同一BFC区域中，问题不就解决了吗！

所以，可以给div2元素的外面嵌套一个box盒子，然后给box开启BFC，div1和div2位于不同的BFC元素中，外边距就不会折叠了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fgCl8cHQ-1678067988412)(%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/4%201.png)]

源代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.div1 {margin-bottom: 100px;width: 150px;height: 150px;background-color: orange;}.div2 {margin-top: 120px;width: 150px;height: 150px;background-color: skyblue;}.box{overflow: hidden;}</style>
</head><body><div class="div1">1</div><div class="box"><div class="div2">2</div></div>
</body></html>

相关文章：

初识BFC

初识BFC 先说如何开启BFC&#xff1a; 1.设置display属性&#xff1a;inline-block&#xff0c;flex&#xff0c;grid 2.设置定位属性&#xff1a;absolute&#xff0c;fixed 3.设置overflow属性&#xff1a;hidden&#xff0c;auto&#xff0c;scroll 4.设置浮动&#xf…...

编程日记 2023/3/11 18:01:36

随想录二刷Day17——二叉树

文章目录二叉树9. 二叉树的最大深度10. 二叉树的最小深度11. 完全二叉树的节点个数12. 平衡二叉树二叉树 9. 二叉树的最大深度 104. 二叉树的最大深度 思路1&#xff1a; 递归找左右子树的最大深度&#xff0c;选择最深的 1&#xff08;即加上当前层&#xff09;。 class So…...

编程日记 2023/3/11 18:00:34

Weblogic管理控制台未授权远程命令执行漏洞复现（cve-2020-14882/cve-2020-14883）

目录漏洞描述影响版本漏洞复现权限绕过漏洞远程命令执行声明&#xff1a;本文仅供学习参考&#xff0c;其中涉及的一切资源均来源于网络&#xff0c;请勿用于任何非法行为&#xff0c;否则您将自行承担相应后果&#xff0c;本人不承担任何法律及连带责任。 漏洞描述 Weblogic…...

编程日记 2023/3/11 17:59:32

STM32F103CubeMX定时器

前言定时器作为最重要的内容之一&#xff0c;是每一位嵌入式软件工程师必备的能力。STM32F103的定时器是非常强大的。1&#xff0c;他可以用于精准定时&#xff0c;当成延时函数来使用。不过个人不建议这么使用&#xff0c;因为定时器很强大&#xff0c;这么搞太浪费了。如果想…...

编程日记 2023/3/11 17:58:29

多态且原理

多态 文章目录多态多态的定义和条件协变&#xff08;父类和子类的返回值类型不同&#xff09;函数隐藏和虚函数重写的比较析构函数的重写关键字final和override抽象类多态的原理单继承和多继承的虚函数表单继承下的虚函数表多继承下的虚函数表多态的定义和条件 定义&#xff1…...

编程日记 2023/3/11 17:57:26

动态库(二) 创建动态库

文章目录创建动态库设计动态库ABI兼容动态符号的可见性示例控制符号可见性通过-fvisibility通过strip工具删除指定符号创建动态库 在Linux中创建动态库通过如下过程完成&#xff1a; gcc -fPIC -c first.c second.c gcc -shared first.o second.o -o libdynamiclib.so 按照Li…...

编程日记 2023/3/11 17:56:25

opencv加水印

本文介绍opencv给图片加水印的方法。 目录1、添加水印1.1、铺满1.2、在指定区域添加1.3、一比一铺满1、添加水印 添加水印的原理是调低两张图片的透明度&#xff0c;然后叠加起来。公式如下&#xff1a; dst src1 * opacity src2 * (1 - opacity) gamma; opacity是透明度&a…...

编程日记 2023/3/11 17:55:21

Flume基操

Flume概述 Flume 定义 Flume 是 Cloudera 提供的一个高可用的&#xff0c;高可靠的&#xff0c;分布式的海量日志采集、聚合和传输的系统。Flume 基于流式架构&#xff0c;灵活简单。 Flume最主要的作用就是&#xff0c;实时读取服务器本地磁盘的数据&#xff0c;将数据写入到…...

编程日记 2023/3/11 17:54:16

图文详解红黑树，还有谁不会？

前言在MySQL中&#xff0c;无论是Innodb还是MyIsam&#xff0c;都使用了B树作索引结构(这里不考虑hash等其他索引)。本文将从最普通的二叉查找树开始&#xff0c;逐步说明各种树解决的问题以及面临的新问题&#xff0c;从而说明MySQL为什么选择B树作为索引结构。目录一、二叉查…...

编程日记 2023/3/11 17:53:13

多目标遗传算法NSGA-II原理详解及算法实现

在接触学习多目标优化的问题上&#xff0c;经常会被提及到多目标遗传算法NSGA-II&#xff0c;网上也看到了很多人对该算法的总结&#xff0c;但真正讲解明白的以及配套用算法实现的文章很少&#xff0c;这里也对该算法进行一次详解与总结。会有侧重点的阐述&#xff0c;不会针对…...

编程日记 2023/3/11 17:52:10

Spark 键值对RDD的操作

键值对RDD&#xff08;Pair RDD&#xff09;是指每个RDD元素都是&#xff08;key&#xff0c;value&#xff09;键值对类型&#xff0c;是一种常见的RDD类型&#xff0c;可以应用于很多的应用场景。 一、 键值对RDD的创建 键值对RDD的创建主要有两种方式&#xff1a; &#x…...

编程日记 2023/3/11 17:51:06

【SpringCloud】SpringCloud详解之Feign远程调用

目录前言SpringCloud Feign远程服务调用一.需求二.两个服务的yml配置和访问路径三.使用RestTemplate远程调用(order服务内编写)四.构建Feign(order服务内配置)五.自定义Feign配置(order服务内配置)六.Feign配置日志(oder服务内配置)七.Feign调优(order服务内配置)八.抽离Feign前…...

编程日记 2023/3/11 17:50:04

文档团队怎样使用GIT做版本管理

有不少小型文档团队想转结构化写作和发布&#xff0c;但是因为有限的IT技能和IT资源而受阻。本文为这样的小型文档团队而准备&#xff0c;描述怎样使用Git做内容的版本管理。 - 1 - 为什么需要版本管理 当一个团队进行协同创作内容时&#xff0c;有以下需要&#xff1a; 在对…...

编程日记 2023/3/11 17:49:02

【java】Java中-＞ 是什么意思?

先看一个例子 EventQueue.invokeLater(() -> {JFrame frame new ImageViewerFrame();frame.setTitle("ImageViewer");frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);frame.setVisible(true);}); // 上面那一段可以看成如下: EventQueue.invokeLater(ne…...

编程日记 2023/3/11 17:48:00

网络类型部分实验

1.实验思路&#xff1a; 首先用DHCP 给四台PC配置上地址&#xff0c;配置成功后 其次底层IP地址的下发完成的同时&#xff0c;进行检测是否可以ping通 接着进行R1和R5之间使用PPP的PAP认证&#xff0c;R5为主认证方 主认证方ISP 被认证方R1 其次进行R2和R5使用PPP的CHAP认证&am…...

编程日记 2023/3/11 17:46:57

java教程--函数式接口--lambda表达式--方法引用

函数式接口 介绍 jdk8新特性&#xff0c;只有一个抽象方法的接口我们称之为函数接口。 FunctionalInterface ​ JDK的函数式接口都加上了FunctionalInterface 注解进行标识。但是无论是否加上该注解只要接口中只有一个抽象方法&#xff0c;都是函数式接口。 如在Comparato…...

编程日记 2023/3/11 17:45:50

java——代理

什么是代理&#xff1a; 给目标对象一个代理对象&#xff0c;由代理对象控制着对目标对象的引用 为什么使用代理&#xff1a; ①&#xff1a;功能增强&#xff1a;通过代理业务对原有业务进行增强 ②&#xff1a;用户只能同行过代理对象间接访问目标对象&#xff0c;防止用…...

编程日记 2023/3/11 17:44:49

kubernetes中service探讨

文章目录序言kube-proxy代理模型userspace代理模型iptables代理模型ipvs代理模型修改代理模型Service资源类型ClusterIPNodePortLoadBalancerExternalName应用Service资源应用ClusterIP Service资源应用NodePort Service资源应用LoadBalancer Service资源外部IP序言 在Kuberne…...

编程日记 2023/3/11 17:43:46

Python3实现“美颜”功能

导语利用Python实现美颜。。。这是之前在GitHub上下载的一个项目。。。似乎有些日子了。。。所以暂时找不到原项目的链接了。。。今天抽空看了下它源代码的主要思想&#xff0c;似乎挺简单的。。。于是决定用Python3自己复现一下。。。T_T感觉还是挺有趣的。。。Just have a tr…...

编程日记 2023/3/11 17:42:45

【创建“待选项”按钮02计算坐标 Objective-C语言】

一、之前，我们已经把“待选项”按钮，创建好了，但是唯一的问题是，坐标都是一样的，所以都显示在一起了 1.下面，我们来设置一下，这些“待选项”按钮的坐标， 现在，“待选项”按钮的坐标，是不是都在同一个位置啊， 回忆一下，这个待选项按钮，是怎么生成的， 首先，是在…...

编程日记 2023/3/11 17:41:40

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2026/1/31 12:03:23

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2026/1/8 22:17:14

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2026/1/20 19:15:45

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2026/1/24 19:22:03

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2026/1/31 8:35:07

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/8/18 3:01:22

虚幻基础：角色旋转

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 移动组件使用控制器所需旋转&#xff1a;组件 使用 控制器旋转将旋转朝向运动&#xff1a;组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转&#xff1a;必须移动才能旋转&#xff0c;不移动不旋转控制器…...

编程新知 2025/11/30 0:06:07