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

初识BFC

news 2025/9/4 17:17:32

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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/9/3 9:09:34

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

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

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/6/21 17:11:09

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/8/4 2:45:15

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2025/9/4 15:28:38

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2025/9/2 16:54:25

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/9/1 8:36:19

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

编程新知 2025/8/19 9:45:25

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

编程新知 2025/9/2 17:55:01