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

BFC的含义以及应用

news 2025/11/7 3:24:09

什么是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

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/9/7 11:32:34

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/11/2 21:23:47

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/10/16 13:08:30

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/11/3 16:32:18

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/10/27 13:23:12

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/10/20 22:01:31

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/9/24 19:23:45

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/11/3 17:58:12