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

BFC的含义以及应用

news 文章来源：https://blog.csdn.net/qq_62860882/article/details/129226247 2025/4/21 7:26:06

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

BFC的规则😃

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

高度塌陷问题

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

双栏布局问题

相关文章：

BFC的含义以及应用

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

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

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

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

TCP 的演化史-sack 与 reordering metric

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

包子凑数(完全背包)

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

Redis主要数据类型

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

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

Vuex基础语法

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

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

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

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

XML调用 CAPL Test Function

Linux网络配置（NAT）

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

3.7寸按键翻页工牌

西北工业大学大学物理（II）选填解析2019-2020期末

[计算机网络(第八版)]第一章概述（章节测试/章节作业）

华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典

电子科技大学数据库与软件工程三

华为开源自研AI框架昇思MindSpore数据变换：Transforms

软件测试之边界值测试法

【华为OD机试模拟题】用 C++ 实现 - 最近的点（2023.Q1）

Qt windeployqt.exe 打包qml

【人脸识别】CurricularFace：自适应课程学习人脸识别损失函数