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

CSS BFC特性和应用

news 2026/5/16 17:44:33

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

UE5保姆级教程：用Electra Player插件在场景里放视频，从导入MP4到带声音播放

UE5实战指南：Electra Player插件实现场景视频播放全流程解析在虚幻引擎5的沉浸式场景中，视频播放功能已成为增强环境叙事的关键技术。无论是商场里的动态广告屏、科幻场景中的全息投影，还是角色手持设备的交互界面，流畅的视频播放…...

编程新知 2026/5/16 16:52:54

高途CFO沈楠辞职高级副总裁罗斌晋升为首席运营官

雷递网乐天 5月15日高途(NYSE: GOTU)日前宣布管理层调整。高途称，公司CFO沈楠由于个人原因已递交辞呈，2026年5月31日生效。沈楠辞职后三个月内继续担任公司顾问，以确保平稳过渡。高途战略主管徐步青将负责公司资本市场相关事宜，高…...

编程新知 2026/5/16 16:52:54

3步解锁12种加密音乐：免费开源工具让数字音乐重获自由

3步解锁12种加密音乐：免费开源工具让数字音乐重获自由【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库： 1. https://github.com/unlock-music/unlock-music ；2. https://git.unlock-music.dev/um/web 项目地址: https…...

编程新知 2026/5/16 16:44:32

nv-context：开发者必备的上下文管理工具，提升开发效率与团队协作

1. 项目概述：一个为开发者量身定制的上下文管理工具如果你是一名开发者，尤其是在处理大型项目、复杂配置或者需要频繁切换工作环境时，一定对“上下文”这个概念又爱又恨。爱的是，它能帮你隔离环境、管理配置，让项目井…...

编程新知 2026/5/16 16:23:20

10分钟精通：Bilibili视频下载器完整使用指南与高级技巧

10分钟精通：Bilibili视频下载器完整使用指南与高级技巧【免费下载链接】bilibili-downloader B站视频下载，支持下载大会员清晰度4K，持续更新中项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-downloader 还在为无法保存B站…...

编程新知 2026/5/16 14:35:06

问卷星 vs 腾讯问卷 vs 金数据：2026主流问卷工具AI开放能力最新横评

作为问卷调研行业的深度观察者，老N近期注意到调研工具链正在发生一场静悄悄的革命。最近，问卷星正式上线了AI工具包（wjx-ai-kit），其CLI（命令行工具）支持多达67个子命令，并适配了Clau…...

编程新知 2026/5/16 12:45:29

桌面端酷安社区体验：Coolapk UWP 完整使用指南

桌面端酷安社区体验：Coolapk UWP 完整使用指南【免费下载链接】Coolapk-UWP 一个基于 UWP 平台的第三方酷安客户端项目地址: https://gitcode.com/gh_mirrors/co/Coolapk-UWP 你是否曾经希望在电脑大屏幕上舒适地浏览酷安社区，摆脱手机小屏幕的…...

编程新知 2026/5/16 12:13:58

别再只盯着PWM了！手把手教你为你的Arduino项目选择合适的DCDC调制方式（PFM/PWM/Burst Mode全解析）

别再只盯着PWM了！手把手教你为你的Arduino项目选择合适的DCDC调制方式（PFM/PWM/Burst Mode全解析） 当你为Arduino项目挑选电源模块时，是否曾被数据手册上PWM、PFM、Burst Mode这些术语搞得一头雾水？我曾在一个低功耗气…...

编程新知 2026/5/16 12:09:53

NHSE完整指南：动物森友会存档编辑器的终极使用手册

NHSE完整指南：动物森友会存档编辑器的终极使用手册【免费下载链接】NHSE Animal Crossing: New Horizons save editor 项目地址: https://gitcode.com/gh_mirrors/nh/NHSE 还在为《集合啦！动物森友会》中收集稀有物品而烦恼吗？想快速…...

编程新知 2026/5/16 11:54:33

终极MifareOneTool使用指南：零基础玩转MIFARE经典卡的Windows图形化神器

终极MifareOneTool使用指南：零基础玩转MIFARE经典卡的Windows图形化神器【免费下载链接】MifareOneTool A GUI Mifare Classic tool on Windows（停工/最新版v1.7.0） 项目地址: https://gitcode.com/gh_mirrors/mi/MifareOneTool 想要…...

编程新知 2026/5/16 11:43:35

目录

1，介绍

2，BFC布局规则

3，创建BFC

4，BFC应用

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

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

3，margin 合并

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

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

相关文章：