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

【CSS】谈谈你对BFC的理解

article 2026/5/6 19:41:30

理解 CSS 中的 BFC（块格式化上下文）

在 CSS 中，BFC（Block Formatting Context） 是一个非常重要的概念，它决定了元素如何对其子元素进行定位，以及与其他元素的关系。理解 BFC 对于解决常见的布局问题，如清除浮动、防止外边距合并等，非常有帮助。
本文将结合代码和图片，深入浅出地讲解 BFC 的概念、应用以及如何创建 BFC。

什么是 BFC？

块格式化上下文（BFC） 是 Web 页面的可视化 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单来说，BFC 是一个独立的渲染区域，内部的元素布局不会影响到外部的元素，反之亦然。

BFC 的特性
  1. 内部的盒子会在垂直方向上一个接一个地放置。
  2. 同一个 BFC 内的两个相邻块级盒子的垂直外边距会发生折叠。
  3. BFC 的区域不会与浮动元素重叠。
  4. BFC 能够包含浮动的元素。
  5. 计算 BFC 的高度时，浮动元素也参与计算。
如何创建 BFC？

有多种方式可以创建 BFC，以下是几种常见的方法：

  1. 根元素（<html>）
  2. 浮动元素（float 不为 none）
  3. 绝对定位元素（position 为 absolute 或 fixed）
  4. 行内块元素（display 为 inline-block）
  5. 表格单元格（display 为 table-cell）
  6. 表格标题（display 为 table-caption）
  7. overflow 不为 visible 的元素
  8. display 为 flow-root 的元素
  9. contain 为 layout、content 或 strict 的元素

下面我们通过几个例子来具体说明。

示例 1：清除浮动

问题描述：

当一个父元素包含浮动的子元素时，父元素的高度可能会塌陷。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>清除浮动示例</title><style>.parent {border: 1px solid #000;/* 没有创建 BFC */}.child {float: left;width: 100px;height: 100px;background-color: lightblue;}</style>
</head>
<body><div class="parent"><div class="child">浮动元素</div><div class="child">浮动元素</div></div>
</body>
</html>

效果：
在这里插入图片描述

解决方法：

通过创建 BFC，使父元素包含浮动的子元素。

.parent {border: 1px solid #000;overflow: hidden; /* 创建 BFC */
}

效果：
在这里插入图片描述

示例 2：防止外边距合并

问题描述：

在同一个 BFC 内，两个相邻的块级元素的外边距会发生合并。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>外边距合并示例</title><style>.box {width: 200px;height: 100px;margin: 20px;background-color: lightgreen;}</style>
</head>
<body><div class="box">盒子1</div><div class="box">盒子2</div>
</body>
</html>

效果：
在这里插入图片描述

解决方法：

通过创建不同的 BFC，防止外边距合并。

 <div class="box">盒子1</div><div style="overflow: hidden"><div class="box">盒子2</div></div>

效果：

在这里插入图片描述

示例 3：BFC 与浮动元素

问题描述：

BFC 的区域不会与浮动元素重叠。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>BFC 与浮动元素示例</title><style>.float {float: left;width: 100px;height: 100px;background-color: lightcoral;}.bfc {overflow: hidden; /* 创建 BFC */width: 200px;height: 200px;background-color: lightyellow;}</style>
</head>
<body><div class="float">浮动元素</div><div class="bfc">BFC 区域</div>
</body>
</html>

效果：
在这里插入图片描述

解释：

BFC 区域的背景色为 lightyellow 的 div 不会与浮动的 div 重叠，而是环绕在浮动元素的周围。

总结

BFC 是 CSS 中一个强大的工具，能够帮助我们解决许多常见的布局问题。通过创建 BFC，我们可以：

  • 清除浮动
  • 防止外边距合并
  • 实现更复杂的布局

理解 BFC 的概念和应用，可以让我们在编写 CSS 时更加得心应手。希望本文能够帮助你更好地理解 BFC，并在实际项目中灵活运用。

相关文章：

【CSS】谈谈你对BFC的理解

理解 CSS 中的 BFC&#xff08;块格式化上下文&#xff09; 在 CSS 中&#xff0c;BFC&#xff08;Block Formatting Context&#xff09; 是一个非常重要的概念&#xff0c;它决定了元素如何对其子元素进行定位&#xff0c;以及与其他元素的关系。理解 BFC 对于解决常见的布局…...

编程日记 2026/5/6 19:41:30

kubernetes-部署性能监控平台

在当今快速发展的云计算时代&#xff0c;Kubernetes 已成为容器编排的事实标准。随着越来越多的应用迁移到 Kubernetes 平台上&#xff0c;如何有效地监控集群的健康状态、资源使用情况以及应用性能变得尤为重要。一个完善的监控系统可以帮助我们及时发现问题、优化资源配置&am…...

编程日记 2026/3/4 1:15:27

【Uniapp-Vue3】iconfont图标库的使用

先在iconfont图标库中将需要的图标加入购物车 点击右侧购物车的图标 点击添加至项目&#xff0c;可以选中项目进行加入&#xff0c;也可以点击文件加号创建一个新的项目并添加 加入以后会来到如下界面&#xff0c;点击下载至本地 双击打开下载的.zip文件 将.css和.ttf文件进…...

编程日记 2026/4/29 17:43:04

Linux find 命令 | grep 命令 | 查找 / 列出文件或目录路径 | 示例

注&#xff1a;本文为 “Linux find 命令 | grep 命令使用” 相关文章合辑。 未整理去重。 如何在 Linux 中查找文件 作者&#xff1a; Lewis Cowles 译者&#xff1a; LCTT geekpi | 2018-04-28 07:09 使用简单的命令在 Linux 下基于类型、内容等快速查找文件。 如果你是 W…...

编程日记 2026/5/7 4:39:58

Day 28 卡玛笔记

这是基于代码随想录的每日打卡 77. 组合 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4], ]示例 2…...

编程日记 2026/5/5 11:35:33

1.PPT：天河二号介绍【12】

目录 NO1 NO2.3.4.5 NO6.7.8.9​ NO1 PPT&#xff1a;新建一个空白演示文档→保存到考生文件夹下&#xff1a;天河二号超级计算机.pptx幻灯片必须选择一种设计主题&#xff1a;设计→主题&#xff08;随便选中一种&#xff09;幻灯片的版式&#xff1a;开始→版式&#x…...

编程日记 2026/5/5 14:01:56

AI大模型开发原理篇-4：神经概率语言模型NPLM

神经概率语言模型&#xff08;NPLM&#xff09;概述 神经概率语言模型&#xff08;Neural Probabilistic Language Model, NPLM&#xff09; 是一种基于神经网络的语言建模方法&#xff0c;它将传统的语言模型和神经网络结合在一起&#xff0c;能够更好地捕捉语言中的复杂规律…...

编程日记 2026/3/22 1:06:01

物联网领域的MQTT协议，优势和应用场景

MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;作为轻量级发布/订阅协议&#xff0c;凭借其低带宽消耗、低功耗与高扩展性&#xff0c;已成为物联网通信的事实标准。其核心优势包括&#xff1a;基于TCP/IP的异步通信机制、支持QoS&#xff08;服务质量&…...

编程日记 2026/5/7 5:50:41

电控---中断

中断 1.处理器系统在执行代码的时候&#xff0c;会从存储器依次取出指令和数据&#xff0c;这种能力需要在处理器里保存一个存储器地址&#xff0c;就是所谓的程序计数器&#xff08;Program Counter,PC&#xff09;&#xff0c;也叫程序指针 2.当外部中断&#xff08;Extern …...

编程日记 2026/5/5 18:18:41

动态规划DP 背包问题 多重背包问题（朴素版+二进制优化+单调队列）

概览检索 动态规划DP 概览&#xff08;点击链接跳转&#xff09; 动态规划DP 背包问题 概览&#xff08;点击链接跳转&#xff09; 多重背包问题1 原题链接 AcWiing 4. 多重背包问题1 题目描述 有 N种物品和一个容量是 V的背包。 第 i 种物品最多有 si件&#xff0c;每件体…...

编程日记 2026/5/7 12:38:19

调试与错误修复：Cursor 如何成为你的编程助手

引言 调试是软件开发过程中最耗时且最具挑战性的环节之一。据统计&#xff0c;开发者平均将 50% 以上的编码时间 用于定位和修复错误。传统调试工具&#xff08;如断点调试器、日志分析&#xff09;虽能解决问题&#xff0c;但往往需要开发者手动追溯代码执行流程&#xff0c;…...

编程日记 2026/2/22 1:19:15

PHP 常用函数2025.02

PHP implode() 函数 语法 implode(separator,array) 参数描述separator可选。规定数组元素之间放置的内容。默认是 ""&#xff08;空字符串&#xff09;。array必需。要组合为字符串的数组。 技术细节 返回值&#xff1a;返回一个由数组元素组合成的字符串。PHP 版…...

编程日记 2026/5/7 13:35:56

浏览器查询所有的存储信息，以及清除的语法

要在浏览器的控制台中查看所有的存储&#xff08;例如 localStorage、sessionStorage 和 cookies&#xff09;&#xff0c;你可以使用浏览器开发者工具的 "Application" 标签页。以下是操作步骤&#xff1a; 1. 打开开发者工具 在 Chrome 或 Edge 浏览器中&#xf…...

编程日记 2026/2/14 4:34:18

Paimon写入性能

写入性能 Paimon的写入性能与检查点密切相关&#xff0c;因此需要更大的写入吞吐量&#xff1a; 增加检查点间隔&#xff0c;或者仅使用批处理模式。增加写入缓冲区大小。启用写缓冲区溢出。如果您使用固定存储桶模式&#xff0c;请重新调整存储桶数量。 1 并行度 建议sink…...

编程日记 2026/3/2 5:29:51

Golang 并发机制-5：详解syn包同步原语

并发性是现代软件开发的一个基本方面&#xff0c;Go&#xff08;也称为Golang&#xff09;为并发编程提供了一组健壮的工具。Go语言中用于管理并发性的重要包之一是“sync”包。在本文中&#xff0c;我们将概述“sync”包&#xff0c;并深入研究其最重要的同步原语之一&#xf…...

编程日记 2026/5/7 15:44:17

排序算法与查找算法

1.十大经典排序算法 我们希望数据以一种有序的形式组织起来&#xff0c;无序的数据我们要尽量将其变得有序 一般说来有10种比较经典的排序算法 简单记忆为Miss D----D小姐 时间复杂度 &#xff1a;红色<绿色<蓝色 空间复杂度&#xff1a;圆越大越占空间 稳定性&…...

编程日记 2026/5/1 17:30:11

如何构建ObjC语言编译环境?构建无比简洁的clang编译ObjC环境？Windows搭建Swift语言编译环境？

如何构建ObjC语言编译环境? 除了在线ObjC编译器&#xff0c;本地环境Windows/Mac/Linux均可以搭建ObjC编译环境。 Mac自然不用多说&#xff0c;ObjC是亲儿子。(WSL Ubuntu 22.04) Ubuntu可以安装gobjc/gnustep和gnustep-devel构建编译环境。 sudo apt-get install gobjc gnus…...

编程日记 2026/2/27 15:32:16

数据结构课程设计（三）构建决策树

3 决策树 3.1 需求规格说明 【问题描述】 ID3算法是一种贪心算法&#xff0c;用来构造决策树。ID3算法起源于概念学习系统&#xff08;CLS&#xff09;&#xff0c;以信息熵的下降速度为选取测试属性的标准&#xff0c;即在每个节点选取还尚未被用来划分的具有最高信息增益的…...

编程日记 2026/4/30 14:46:06

深度剖析八大排序算法

欢迎并且感谢大家指出我的问题&#xff0c;由于本人水平有限&#xff0c;有些内容写的不是很全面&#xff0c;只是把比较实用的东西给写下来&#xff0c;如果有写的不对的地方&#xff0c;还希望各路大牛多多指教&#xff01;谢谢大家&#xff01;&#x1f970; 在计算机科学领…...

编程日记 2026/3/10 3:25:00

python-leetcode-二叉树的层序遍历

102. 二叉树的层序遍历 - 力扣&#xff08;LeetCode&#xff09; # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right from coll…...

编程日记 2026/5/6 18:05:31

毕业设计：基于深度学习的高压线周边障碍物自动识别与监测系统

目录 前言 课题背景和意义 实现技术思路 一、算法理论基础 1.1 卷积神经网络 1.2 目标检测算法 1.3 注意力机制 二、 数据集 2.1 数据采集 2.2 数据标注 三、实验及结果分析 3.1 实验环境搭建 3.2 模型训练 3.2 结果分析 最后 前言 &#x1f4c5;大四是整个大学…...

编程日记 2026/5/7 9:45:20

顺序表（ArrayList）

1、简介 顺序表是用一段物理地址连续 的存储单元依次存储数据元素的线性结构&#xff0c;一般情况下 采用数组存储 。在 数组 上完成数据的增删查改。&#xff08; 顺序表的底层结构是一个数组 &#xff09; 2、顺序表的实现 下面是顺序表的一些基本成员和方法&#xff0c;能够…...

编程日记 2026/3/12 0:59:18

【Hadoop】Hadoop的HDFS

这里写目录标题 HDFS概述HDFS产出背景及定义HDFS产生背景HDFS定义 HDFS优缺点HDFS优点HDFS缺点 HDFS组成架构HDFS文件块大小 HDFS的Shell操作常用命令实操准备工作上传下载HDFS直接操作 HDFS的API操作客户端环境准备HDFS的API案例实操HDFS文件上传HDFS文件下载HDFS文件更名和移…...

编程日记 2026/5/7 15:29:56

C++ Primer 迭代器

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…...

编程日记 2026/5/6 13:35:45

使用 Postman 进行 API 测试：从入门到精通

使用 Postman 进行 API 测试&#xff1a;从入门到精通 使用 Postman 进行 API 测试&#xff1a;从入门到精通一、什么是 API 测试&#xff1f;二、Postman 简介三、环境搭建四、API 测试流程1. 收集 API 文档2. 发送基本请求示例&#xff1a;发送 GET 请求示例代码&#xff08;…...

编程日记 2026/2/17 0:06:25

Leetcode面试高频题分类刷题总结

https://zhuanlan.zhihu.com/p/349940945 以下8个门类是面试中最常考的算法与数据结构知识点。 排序类&#xff08;Sort&#xff09;&#xff1a; 基础知识&#xff1a;快速排序&#xff08;Quick Sort&#xff09;&#xff0c; 归并排序&#xff08;Merge Sort&#xff09;的…...

编程日记 2025/5/27 14:53:35

8.原型模式(Prototype)

动机 在软件系统中&#xff0c;经常面临着某些结构复杂的对象的创建工作&#xff1b;由于需求的变化&#xff0c;这些对象经常面临着剧烈的变化&#xff0c;但是它们却拥有比较稳定一致的接口。 之前的工厂方法和抽象工厂将抽象基类和具体的实现分开。原型模式也差不多&#…...

编程日记 2026/2/17 1:14:34

简单介绍一下什么是OpenFeign

OpenFeign是什么&#xff1f; OpenFeign是一个声明式的Http客户端&#xff0c;它可以用来发起Http请求 它主要用于SpringCloud微服务之间的通讯&#xff0c;让调用另一个服务的Java方法和调用本地方法一样快速和便捷 之前我们是用RestTemplate写一大堆东西发起Http请求远程调…...

编程日记 2026/4/30 7:29:05

力扣动态规划-20【算法学习day.114】

前言 ###我做这类文章一个重要的目的还是记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&#xff01;&#xff01;&#xff01; 习题 1.网格中的最小路径代价 题目链接…...

编程日记 2026/5/1 12:34:00

Codeforces Round 1002 (Div. 2)(部分题解)

补题链接 A. Milya and Two Arrays 思路&#xff1a;题意还是比较好理解&#xff0c;分析的话我加了一点猜的成分&#xff0c;对a&#xff0c;b数组的种类和相加小于4就不行&#xff0c;蒋老师的乘完后小于等于2也合理。 AC代码&#xff1a; #include <bits/stdc.h> u…...

编程日记 2026/5/1 19:42:13