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

初识BFC

news 2025/10/24 13:53:18

初识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

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/10/17 17:55:51

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/10/12 21:22:14

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/10/21 0:37:39

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/7/28 21:04:40

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/10/21 8:55:56

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/10/21 3:46:44

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/10/1 19:01:00

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/9/30 3:12:52

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2025/10/7 1:20:38