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

BFC的含义以及应用

news 2026/2/7 17:17:19

什么是BFC?

BFC全称是Block Formatting context，翻译过来就是块级格式化上下文。简单来说，BFC是一个==完全独立==的空间。让空间里的子元素不会影响到外面的布局。😃😃😃

如何触发BFC呢？

mdn给了如下方式：😃

Introduction to formatting contexts 格式化上下文简介 - CSS：层叠样式表 | MDN (mozilla.org)

html 元素不是唯一能够创建块格式上下文的元素。任何块级元素都可以通过应用某些 CSS 属性来创建一个 BFC

除了文档的根元素html之外，还将在以下情况下创建一个新的 BFC：

  • 使用float 使其浮动的元素
  • 绝对定位的元素 (包含 position: fixed 或position: sticky
  • 使用以下属性的元素 display: inline-block
  • 表格单元格或使用 display: table-cell, 包括使用 display: table-* 属性的所有表格单元格
  • 表格标题或使用 display: table-caption 的元素
  • 块级元素的 overflow 属性不为 visible
  • 元素属性为 display: flow-root 或 display: flow-root list-item
  • 元素属性为 contain: layout, content, 或 strict
  • flex items
  • 网格布局元素
  • multicol containers
  • 元素属性 column-span 设置为 all

BFC的规则😃

  • BFC也就是块级元素，会在竖直方向上依次排列。
  • BFC就是页面上一个独立的容器，容器的标签不会影响到外面布局
  • 垂直方向的距离会重叠，属于同一个BFC的两个外标签会发生重叠。
  • 计算BFC的高度，浮动元素也参与计算。

使用BFC解决几个常见的问题

高度塌陷问题

我们在使用的过程中，常常会碰到这样的问题，将子元素浮动起来，父元素的高度并没有被撑开。例如

<!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>.outer{background-color: black;}.box1{width: 100px;height: 300px;float: left;background-color: skyblue;}.box2{width: 100px;height: 300px;float: left;margin-left: 10px;background-color: palegreen;}</style>
</head>
<body><div class="outer"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>

在这里插入图片描述

可以看见，因为背景色没有黑色，所以并没有被撑开。

修改代码后

 .outer{background-color: black;overflow: hidden;}

在这里插入图片描述

此时，浮动中的高度塌陷就被解决了。

外边距合并问题(只处理嵌套模块合并问题)

<!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;}.box1 {width: 300px;height: 200px;background-color: pink;margin-top: 10px;}.box2 {width: 200px;height: 100px;background-color: blue;margin-top: 20px;}</style>
</head><body><div class="box1"><div class="box2"></div></div></body></html>

在这里插入图片描述

修改代码后

    .box1 {width: 300px;height: 200px;background-color: pink;overflow: hidden;margin-top: 10px;}

在这里插入图片描述

双栏布局问题

引发这个问题的原因==主要是浮动的特性。==

浮动和绝对定位一样，都会脱离文档流，但是浮动与绝对定位不一样的是浮动脱离文档流后，其余的盒子的文字显示会避开浮动元素，绝对定位就相当于飘到天上去了。但是浮动算是半票。对此，双栏布局也有这个问题。文字被浮动元素挤下去了。例如

<!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;}div{width: 300px;}.left{width: 200px;float: left;background-color: salmon;}.right{width: 300px;background-color: lightblue;}</style>
</head><body><div class="outer"><div class="left">的撒昆德拉是科幻大师dasdasdsad大号三菱电机嘎斯了解更多就撒开顶顶顶顶德鲁克</div><div class="right">的撒昆德拉是科幻大师dasdasdsad大号三菱电机嘎斯了解更多就撒开顶顶顶顶德鲁克的撒昆德拉是科幻大师dasdasdsad大号三菱电机嘎斯了解更多就撒开顶顶顶顶德鲁克</div></div>
</body></html>

在这里插入图片描述

呈现出来的是这种效果，显然这种效果是不好的。对此，解决办法就是BFC.

修改代码

   .right{width: 300px;background-color: lightblue;overflow: hidden;}

在这里插入图片描述

对此，BFC讲解到这里。如果有更深的理解，可以在下方提提想法！！😃😃😃

相关文章：

BFC的含义以及应用

什么是BFC? BFC全称是Block Formatting context&#xff0c;翻译过来就是块级格式化上下文。简单来说&#xff0c;BFC是一个完全独立的空间。让空间里的子元素不会影响到外面的布局。&#x1f603;&#x1f603;&#x1f603; 如何触发BFC呢&#xff1f; mdn给了如下方式&a…...

编程日记 2023/2/26 14:51:01

电脑技巧：分享8个Win11系统必备小技巧

目录 1、让任务栏显示“右键菜单” 2、任务栏置顶 3、还原经典右键菜单 4、Win11版任务管理器 5、新版AltTab 6、开始菜单不再卡 7、为Edge浏览器添加云母效果 8、自动切换日/夜模式 Win11在很多地方都做了调整&#xff0c;但由于涉及到诸多旧有习惯&#xff0c;再加上…...

编程日记 2023/2/26 14:49:55

C/C++每日一练(20230226)

目录 17. 电话号码的字母组合 37. 解数独 51. N 皇后 52. N皇后 II 89. 格雷编码 90. 子集 II 17. 电话号码的字母组合 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电…...

编程日记 2023/2/26 14:48:49

Vue 3第二章：Vite文件目录结构及SFC语法

文章目录1. Vite 文件目录结构2. Vue3 SFC 语法规范介绍1. Vite 文件目录结构 Vue3 并没有强制规定文件目录结构&#xff0c;开发者可以按照自己喜欢的方式组织代码。不过&#xff0c;通常情况下&#xff0c;我们会按照以下方式组织文件目录&#xff1a; ├── public │ …...

编程日记 2023/2/26 14:47:44

Leetcode 剑指 Offer II 016. 不含重复字符的最长子字符串

题目难度: 中等 原题链接 今天继续更新 Leetcode 的剑指 Offer&#xff08;专项突击版&#xff09;系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的最长…...

编程日记 2023/2/26 14:46:39

TCP 的演化史-sack 与 reordering metric

就着 TCP 本身说事&#xff0c;而不是高谈阔论关于它是如何不合时宜&#xff0c;然后摆出一个更务虚的更新。 从一个 case 开始。 按照现在 Linux TCP(遵守 RFC) 实现&#xff0c;以下是一个将会导致 reordering 更新的 sack 序列&#xff1a; 考虑一种情况&#xff0c;这两个…...

编程日记 2023/2/26 14:45:34

【Spring6】| Spring的入门程序、集成Log4j2日志框架

目录 一&#xff1a;Spring的入门程序 1. Spring的下载 2. Spring的jar文件 3. 第一个Spring程序 4. 第一个Spring程序详细剖析 5. Spring6启用Log4j2日志框架 一&#xff1a;Spring的入门程序 1. Spring的下载 官网地址&#xff1a;https://spring.io/ 官网地址&…...

编程日记 2023/2/26 14:44:29

包子凑数(完全背包)

小明几乎每天早晨都会在一家包子铺吃早餐。 他发现这家包子铺有 N 种蒸笼&#xff0c;其中第 i种蒸笼恰好能放 Ai 个包子。 每种蒸笼都有非常多笼&#xff0c;可以认为是无限笼。 每当有顾客想买 X 个包子&#xff0c;卖包子的大叔就会迅速选出若干笼包子来&#xff0c;使得这若…...

编程日记 2023/2/26 14:43:24

Spring超级全家桶，学完绝对是惊艳面试官的程度

前言Spring框架自2002年诞生以来一直备受开发者青睐&#xff0c;它包括SpringMVC、SpringBoot、Spring Cloud、Spring Cloud Dataflow等解决方案。有人亲切的称之为&#xff1a;Spring 全家桶。很多研发人员把spring看作心目中最好的java项目&#xff0c;没有之一。所以这是重点…...

编程日记 2023/2/26 14:42:15

Redis主要数据类型

Redis 是一个数据结构服务器。 Redis 的核心是提供一系列本机数据类型&#xff0c;可帮助您解决从缓存到队列再到事件处理的各种问题Redis主要数据类型&#xff1a;String&#xff08;字符串&#xff09;&#xff0c;Lists&#xff08;列表&#xff09;&#xff0c;Sets&#x…...

编程日记 2023/2/26 14:41:09

【Linux | ELK 8.2】搭建ELKB集群Ⅰ—— 实验环境说明和搭建Elasticsearch集群

目录1. 实验环境1.1 实验工具1.2 操作系统1.3 架构版本、IP地址规划与虚拟机配置要求1.4 拓扑图1.5 其他要求2. 实验步骤2.1 安装Elasticsearch&#xff08;单节点&#xff09;&#xff08;1&#xff09;检查系统jdk版本&#xff08;2&#xff09;下载elasticsearch&#xff08…...

编程日记 2023/2/26 14:40:00

不同情况下*p和*p的区别(指针)

一说到指针&#xff0c;不少同学就会觉得云里雾里。首先要明白&#xff0c;指针和地址是一个概念&#xff1b;然后明白指针和指针变量的区别。先理解地址和数据&#xff0c;想象内存里面是一个个的小盒子&#xff0c;每个盒子对应一个编号&#xff0c;这个编号就是地址&#xf…...

编程日记 2023/2/26 14:38:50

Vuex基础语法

Vuex vuex官网 文章目录Vuexvuex的工作原理图2.vuex的环境搭建3.vuex的使用1.actons2. mutations3.getters4.vuex中的map映射属性4.1 mapState和mapGetters4.2 mapMutations和mapActions5.vuex多组件通信1.通过计算属性获得2.通过mapState获得6.vuex模块化和命名空间6.1模块化…...

编程日记 2023/2/26 14:37:44

刚上岸字节测试开发岗，全网最真实的大厂面试真题

首先我来解释一下为什么说是全网最真实的面试题&#xff0c;相信大家也发现软件测试面试题在网上流传也已不少&#xff0c;但是经过仔细查看发现了两个很重要的问题。 第一&#xff0c;网上流传的面试题的答案并不能保证百分百正确。也就是说各位朋友辛辛苦苦花了很多时间准备…...

编程日记 2023/2/26 14:36:37

Mac监控键盘输入并执行动作

最新内容在我的另一个博客&#xff1a;Mac监控键盘输入并执行动作 背景 电脑的安全是非常重要的&#xff0c;特别是里面的敏感数据&#xff0c;若是被有心之人利用&#xff0c;那后果不堪设想。 所以我们部门定下了一个规矩&#xff0c;谁离开工位要是不锁屏&#xff0c;就可以…...

编程日记 2023/2/26 14:35:31

Transformer输出张量的值全部相同？！

Transformer输出张量的值全部相同&#xff1f;&#xff01;现象原因解决现象 输入经过TransformerEncoderLayer之后&#xff0c;基本所有输出都相同了。 核心代码如下&#xff0c; from torch.nn import TransformerEncoderLayer self.trans TransformerEncoderLayer(d_mode…...

编程日记 2023/2/26 14:34:25

港科夜闻｜全国政协副主席梁振英先生率香港媒体高管团到访香港科大(广州)...

关注并星标每周阅读港科夜闻建立新视野 开启新思维1、全国政协副主席梁振英先生率香港媒体高管团到访香港科大(广州)。2月21日下午&#xff0c;在全国政协副主席、广州南沙粤港合作咨询委员会顾问梁振英先生的带领下&#xff0c;香港20余家媒体的高管及知名媒体人士到访香港科大…...

编程日记 2023/2/26 14:33:18

XML调用 CAPL Test Function

&#x1f345; 我是蚂蚁小兵&#xff0c;专注于车载诊断领域&#xff0c;尤其擅长于对CANoe工具的使用&#x1f345; 寻找组织 &#xff0c;答疑解惑&#xff0c;摸鱼聊天&#xff0c;博客源码&#xff0c;点击加入&#x1f449;【相亲相爱一家人】&#x1f345; 玩转CANoe&…...

编程日记 2023/2/26 14:32:11

Linux网络配置（NAT）

在搭配好一台虚拟机的时候想要下载&#xff0c;安装些什么但一直失败这个时候就可以检查一下网络是否连接这里我们使用centos7举例子使用命令——ifconfig由此可见我们的系统中目前有3个网卡ens33——用于接入外网&#xff0c;该网卡默认关闭lo——用于访问本地网络&#xff0c…...

编程日记 2023/2/26 14:31:05

数据结构——第二章 线性表（8）——线性表总结

线性表总结 线性表是线性结构的基本形式&#xff0c;用于描述一组同类型而具有1:1线性关系的数据对象。将此类数据对象存放在计算机的内存中时&#xff0c;必须考虑数据元素的存放和数据元素之间关系的存放。常用的存储结构有顺序存结构和链式结构。 顺序表存储特点是用一维数…...

编程日记 2023/2/26 14:29:58

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/2/1 11:44:45

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2026/1/25 4:36:37

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2026/2/1 13:41:09

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/10/17 21:16:57

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/12/17 5:54:30

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

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

编程新知 2025/12/13 4:20:30

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2026/1/26 5:44:16