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

CSS BFC特性和应用

news 2025/12/15 8:17:14

1，介绍

BFC 就是页面上一块独立的容器，内部有自己的渲染布局规则。容器内外的元素不会相互影响。

2，BFC布局规则

内部的元素，在垂直方向上会依次放置。
元素在垂直方向上的距离由 margin 决定，同一个 BFC 的两个相邻元素的 margin 会重叠。
BFC 区域不会和外部浮动元素重叠。
计算 BFC 高度时，浮动子元素也参与运算。

在标准流中的根元素 html 就是一个天然的 BFC 环境。

3，创建BFC

简单介绍下最常用的，更多的创建方式参考MDN-BFC。

属性	属性值
`float`	不为 `none`
`position`	`absolute` 或 `fixed`
`display`	`inline-block`、`flow-root`、`flex`、`grid`、 `table` 等
`overflow`	不为 `visible` 或 `clip` 的块级元素

无论哪种方式创建的BFC，都有一定的副作用。

只有 display: flow-root 是无副作用的，它的行为如同 root（在浏览器中是 html ）元素。

4，BFC应用

1，浮动子元素使父级高度坍塌

<style>.container {border: 2px solid black;}.item {float: left;width: 50px;height: 50px;background-color: salmon;}
</style><body><div class="container"><div class="item"></div></div>
</body>

表现：

在这里插入图片描述
解决：只需要将父元素设置为 BFC 即可。

.container {display: flow-root;
}

在这里插入图片描述

2，非浮动元素被浮动元素覆盖

对于浮动元素的特性来说，这是正常现象。

<style>.box1 {float: left;width: 100px;height: 100px;background-color: rgba(255, 255, 255, 0.75);border: 1px solid black;}.box2 {border: 2px solid red;}
</style><body><div class="box1"></div><div class="box2">求关注，下雪天的夏风</div>
</body>

表现：

在这里插入图片描述

但我们不想让非浮动元素 box2 被覆盖，所以可设置 box2 为 BFC 来解决。

.box2 {display: flow-root;
}

在这里插入图片描述

上面这种就是经典的两列布局实现方式之一。

3，margin 合并

MDN参考

margin 合并的3种情况，BFC可以解决前2种

父子 margin 合并：父级和第1个/最后1个子元素
相邻兄弟元素的 margin 合并
空块级元素的 margin 合并

1，父子 margin 合并：父级和第1个/最后1个子元素

<style>.container {background-color: skyblue;}.item {margin-top: 50px;width: 50px;height: 50px;background-color: salmon;}
</style><div>求关注，下雪天的夏风</div>
<div class="container"><div class="item"></div>
</div>

表现：父级“掉”下来了：

在这里插入图片描述

解决方式之一，就是将父级设置为 BFC。

.container {display: flow-root;
}

在这里插入图片描述

2，相邻兄弟元素的 margin 合并

<style>.box {width: 100px;height: 100px;background-color: salmon;}.box1 {margin-bottom: 50px;}.box2 {margin-top: 100px;}
</style>
<body><div class="box box1"></div><div class="box box2"></div>
</body>

表现，margin 并没有相加，而是合并取最大值：

在这里插入图片描述

解决：给其中一个元素增加父级，这样就回到了第1种情况。

<style>.container {display: flow-root;}
</style><div class="box box1"></div>
<div class="container"><div class="box box2"></div>
</div>

在这里插入图片描述

这里也说明第一种父子 margin 合并还有哪些解决办法（bottom 合并同理）：

父元素设置 border-top
父元素设置 padding-top
父元素和第一个子元素之间添加内联元素进行间隔。

以上。

CSS BFC特性和应用

目录 1，介绍2，BFC布局规则3，创建BFC4，BFC应用1，浮动子元素使父级高度坍塌2，非浮动元素被浮动元素覆盖3，margin 合并1，父子 margin 合并：父级和第1个/最后1个子元素2&…...

编程日记 2023/12/6 14:03:29

软件工程 - 第8章面向对象建模 - 3 - 动态建模

状态图状态是指在对象生命周期中满足某些条件、执行某些活动或等待某些事件的一个条件和状况。案例一：描述烧水器在工作时的详细行为细节 “人就是一个类，而你”、我”、张三”等都是“人这个类的一个实例，站着”、“躺着等都是对象的一…...

编程日记 2023/12/6 14:02:28

Stable Diffusion AI绘画系列【16】:霸气侧漏的二次元武侠风

《博主简介》小伙伴们好，我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源，可关注公-仲-hao:【阿旭算法与机器学习】，共同学习交流~ 👍感谢小伙伴们点赞、关注！ 《------往期经典推…...

编程日记 2023/12/6 14:00:26

第二证券：苹果市值重返3万亿美元，关键因素并非人工智能

当地时间12月5日，到美股收盘，苹果公司股价收涨2.1%，报193.42美元，收盘市值重返3万亿美元上方。上一年12月，苹果公司市值曾在盘中时间短触及3万亿门槛，但收盘并未站稳，本年6月收盘时正式打破3万…...

编程日记 2023/12/6 13:59:23

西南科技大学C++程序设计实验六（继承与派生一）

一、实验目的 1. 理解不同继承属性对派生类访问基类成员的区别 2. 掌握单继承程序编写二、实验任务 1、调试下列程序，并在对程序进行修改后再调试，指出调试中的出错原因（该题中A为基类，B为派生类，B以public方式继承A）重点：理解不同继承方式数据的访问权限，派生类…...

编程日记 2023/12/6 13:57:20

MySQL 性能优化

未完待续... 1. 分库、分表结构优化 1.1 数据库设计不规范的数据库设计存在数据冗余以及插入、更新、删除异常问题。规范化（Normalization）是数据库设计的一系列原理和技术，主要用于减少表中数据的冗余，增加完整性和一致性&…...

编程日记 2023/12/6 13:56:20

求职招聘小程序源码系统全开源源代码：找工作+招人才平台级别运营版附带完整的搭建教程

在当前的求职招聘市场中，尽管存在大量的求职者和招聘者，但依然存在着信息不对称、沟通不畅等问题。小编来给大家分享一款求职招聘小程序源码系统，旨在提供一个高效、便捷、安全的求职招聘平台。以下是部分代码示例： 系统特色功能…...

编程日记 2023/12/6 13:54:18

26、卷积 - 实际上是一个特征提取器

矩阵乘法的本质是特征的融合，卷积算法的本质是特征的提取。回想一下之前所有介绍卷积的时候，描述了一种卷积运算的场景，那就是一个窗口在图片上滑动，窗口中的数值是卷积核的参数，也就是权值。卷积的计算本质是乘累…...

编程日记 2023/12/6 13:53:17

MENU vue3响应式数据的判断、isRef、isReactive、isReadonly、isProxy、ref、reactive、readonlyvue3的生命周期vue3手写isRef、isReactive、isReadonly、isProxyvue3手写ref、深的refvue3手写shallowRef、浅的refvue3customRefvue3readonly与shallowReadonlyvue3toRaw与markRa…...

编程日记 2023/12/6 13:51:15

原来在C++的类中声明函数时可以不写参数名只写参数类型

2023年12月6日，周三上午今天才发现原来可以这样写在C的类中声明函数时可以不写参数名只写参数类型， 但是，在实现时必须写出参数名。 #include<iostream>class People { public:void move(int);void say(std::string);void doSomet…...

编程日记 2023/12/6 13:48:13

独孤思维：这里有蓝海项目，你要吗？

很多人，一看到蓝海项目，就趋之若鹜。觉得红海项目太卷了，根本赚不到钱。凡是认为蓝海项目不卷，可以做起来，做的轻松的，都是弱智和无能的表现。你所能接触到的蓝海，根本就不是蓝海。能够…...

编程日记 2023/12/6 13:47:12

外卖平台推荐算法的优化与实践

目录引言一、推荐算法的原理二、推荐算法的挑战三、实际案例分析四、优化推荐算法的策略五、结论引言在当今数字化社会，外卖平台成为了人们生活中不可或缺的一部分。为了提供更加个性化、高效的服务，外卖平台使用推荐算法成为了一项关键技…...

编程日记 2023/12/6 13:46:10

CONTROLLING VISION-LANGUAGE MODELS FOR MULTI-TASK IMAGE RESTORATION

CONTROLLING VISION-LANGUAGE MODELS FOR MULTI-TASK IMAGE RESTORATION (Paper reading) Ziwei Luo, Uppsala University, ICLR under review(6663), Cited:None, Stars: 350, Code, Paper. 1. 前言像CLIP这样的视觉语言模型已经显示出对零样本或无标签预测的各种下游任务…...

编程日记 2023/12/6 13:44:08

HarmonyOS应用开发——页面

我们将对于多页面以及更多有趣的功能展开叙述，这次我们对于 HarmonyOS 的很多有趣常用组件并引出一些其他概念以及解决方案、页面跳转传值、生命周期、启动模式（UiAbility），样式的书写、状态管理以及动画等方面进行探讨页面之间…...

编程日记 2023/12/6 13:43:07

Java流Stream使用详解（练习）

练习第一题数据过滤定义一个集合，并添加一些整数1,2,3,4,5,6,7,8,9,10过滤奇数，只留下偶数，并将结果保存起来 import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.stream.Collectors…...

编程日记 2023/12/6 13:41:06

请介绍一下MySQL的存储引擎及其特点

问题：请介绍一下MySQL的存储引擎及其特点。回答： MySQL是一个开源的关系型数据库管理系统，它支持多种存储引擎，每个存储引擎都有其自身的特点和适用场景。下面是对MySQL常见存储引擎的简要介绍： InnoDB： …...

编程日记 2023/12/6 13:39:04

Python---魔术方法

1、什么是魔术方法在Python中，__xxx__()的函数叫做魔法方法，指的是具有特殊功能的函数。 2、__init__()方法(初始化方法或构造方法) 思考：人的姓名、年龄等信息都是与生俱来的属性，可不可以在生产过程中就赋予这些属性呢&…...

编程日记 2023/12/6 13:38:03

手把手教你注册意大利商标

在当今全球商业环境中，拥有一个独特的商标可以为企业在市场竞争中提供重要优势。商标作为品牌形象的核心，有助于吸引潜在客户，提升品牌价值，增加客户忠诚度。在意大利，商标注册同样具有重要意义，它能为企业…...

编程日记 2023/12/6 13:35:00

pandas详细笔记

一：什么是Pandas from matplotlib import pyplot import numpy as np import pandas as pdarange np.arange(1, 10, 2) series pd.Series(arange,indexlist("ABCDE")) print(series)二：索引三：切片位置索引切片（左闭…...

编程日记 2023/12/6 13:34:00

win11安装（未完待续）

学习补丁 test.bat 运行后需要重启 slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX slmgr /skms kms.03k.org slmgr /ato 文件扩展名主题性能设置开始按钮靠左任务栏对齐方式-靠左必备软件 f.lux redshift 360管家驱动精灵 edge c*lash（v2*ray不支持w…...

编程日记 2023/12/6 13:32:58

使用VSCode开发Django指南

使用VSCode开发Django指南一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/12/14 12:32:01

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/12/14 14:27:59

HTML 列表、表格、表单

1 列表标签作用：布局内容排列整齐的区域列表分类：无序列表、有序列表、定义列表。例如： 1.1 无序列表标签：ul 嵌套 li，ul是无序列表，li是列表条目。注意事项： ul 标签里面只能包裹 li…...

编程新知 2025/12/12 12:44:29

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/12/11 9:43:36

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/12/14 23:18:04

是否存在路径（FIFOBB算法）

题目描述一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。输入第一行两个整数，分别表示n 和 e 的值（1…...

编程新知 2025/10/1 6:09:21

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...

编程新知 2025/12/9 4:11:09

算法笔记2

1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/12/12 7:29:44

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2025/12/12 4:15:39

目录

1，介绍

2，BFC布局规则

3，创建BFC

4，BFC应用

1，浮动子元素使父级高度坍塌

2，非浮动元素被浮动元素覆盖

3，margin 合并

1，父子 margin 合并：父级和第1个/最后1个子元素

2，相邻兄弟元素的 margin 合并

相关文章：