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

【CSS】说说对BFC的理解

news 2026/5/22 22:24:10

目录

一、概念

二、BFC的布局规则

三、设置BFC的常用方式

四、BFC的应用场景

1、解决浮动元素令父元素高度坍塌的问题

2、解决非浮动元素被浮动元素覆盖问题

3、解决外边距垂直方向重合的问题

五、总结

一、概念

我们在页面布局的时候，经常出现以下情况：

  • 元素高度突然没了？
  • 这两栏布局怎么没法自适应？
  • 这两个元素的间距怎么有点奇怪的样子？

原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念。

BFC，英语全称 Block formatting contexts，翻译成中文就是“块级格式化上下文”。是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。这就好比你在你自己家里面，你想怎么摆放你的家具都可以，你家的家具布局并不会影响邻居家的家具布局。

二、BFC的布局规则

  1. 内部的 Box 会在垂直方向一个接着一个地放置。

  2. Box 垂直方向上的距离由 margin 决定。属于同一个 BFC 的两个相邻的 Box 的 margin 会发生重叠。

  3. 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。

  4. BFC 的区域不会与浮动 Box 重叠。

  5. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

  6. 计算 BFC 的高度时，浮动子元素也参与计算。

三、设置BFC的常用方式

元素或属性属性值
根元素
floatleft、right
postionabsolute、fixed
overflowauto、scroll、hidden
displayinline-block、grid、inline-flex、table

四、BFC的应用场景

1、解决浮动元素令父元素高度坍塌的问题

 给子元素设置浮动后，父元素高度塌陷，

给父元素添加overflow：hidden，设置成一个BFC。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {border: 5px solid;overflow: hidden;}.box2 {width: 100px;height: 100px;background-color: blue;float: left;}</style>
</head><body><div class="box1"><div class="box2"></div></div>
</body></html>

效果：可以看到由于父元素变成 BFC，高度并没有产生塌陷了，其原因是在计算 BFC 的高度时，浮动子元素也参与计算

2、解决非浮动元素被浮动元素覆盖问题

给box1设置float:left后，效果如下

 给非浮动添加overflow：hidden，设置成一个BFC。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 50px;height: 50px;background-color: blue;float: left;}.box2 {width: 100px;height: 50px;background-color: red;overflow: hidden;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body></html>

效果： 由于 BFC 的区域不会与浮动 box 重叠，所以即使 box1 因为浮动脱离了标准流，box2 也不会被 box1 遮挡

3、解决外边距垂直方向重合的问题

 此时我们可以在 box2 外部再包含一个 div，并且将这个 div 设置为 BFC，如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background-color: red;margin-bottom: 10px;}.box2 {width: 100px;height: 100px;background-color: blue;margin-top: 10px;}.box3 {overflow: hidden;}</style>
</head><body><div class="box1"></div><div class="box3"><div class="box2"></div></div>
</body></html>

五、总结

所谓 BFC，也就是“块级格式化上下文”，指的是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。

触发 BFC 的方式有很多，常见的有：

  • 设置浮动

  • overflow 设置为 auto、scroll、hidden

  • positon 设置为 absolute、fixed

常见的 BFC 应用有：

  • 解决浮动元素令父元素高度坍塌的问题

  • 解决非浮动元素被浮动元素覆盖问题

  • 解决外边距垂直方向重合的问题

相关文章：

【CSS】说说对BFC的理解

目录 一、概念 二、BFC的布局规则 三、设置BFC的常用方式 四、BFC的应用场景 1、解决浮动元素令父元素高度坍塌的问题 2、解决非浮动元素被浮动元素覆盖问题 3、解决外边距垂直方向重合的问题 五、总结 一、概念 我们在页面布局的时候&#xff0c;经常出现以下情况&am…...

编程日记 2023/8/9 4:25:47

ES6学习-Class类

class constructor 构造方法 this 代表实例对象 方法之间不需要逗号分隔&#xff0c;加了会报错。 typeof Point // "function" Point Point.prototype.constructor // true类的数据类型就是函数&#xff0c;类本身就指向构造函数。 类的所有方法都定义在类的pr…...

编程日记 2023/8/9 4:24:45

C语言经典小游戏之扫雷（超详解释+源码）

“少年气&#xff0c;是历尽千帆举重若轻的沉淀&#xff0c;也是乐观淡然笑对生活的豁达&#xff01;” 今天我们学习一下扫雷游戏怎么用C语言来实现&#xff01; 扫雷小游戏 1.游戏介绍2.游戏准备3.游戏实现3.1生成菜单3.2游戏的具体实现3.2.1初始化棋盘3.2打印棋盘3.3布置雷…...

编程日记 2023/8/9 4:23:44

算法leetcode｜67. 二进制求和（rust重拳出击）

文章目录 67. 二进制求和&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 67. 二进制求和&#xff1a; 给你两个二进制字符串 a 和 b &a…...

编程日记 2023/8/9 4:22:44

【ASP.NET MVC】第一个登录页面（8）

一、准备工作 先从网上&#xff08;站长之家、模板之家&#xff0c;甚至TB&#xff09;下载一个HTML模板&#xff0c;要求一整套的CSS和必要的JS&#xff0c;比如下图&#xff1a; 登录页面的效果是&#xff1a; 首页&#xff1a; 利用这些模板可以减少前台网页的设计——拿来…...

编程日记 2023/8/9 4:21:43

使用Openoffice或LibreOffice实现World、Excel、PPTX在线预览

使用Openoffice或LibreOffice实现World、Excel、PPTX在线预览 预览方案使用第三方服务使用前端库转换格式 jodconverterjodconverter概述主要特性OpenOfficeLibreOffice jodconverter的基本使用添加依赖配置创建DocumentConverter实例上传与转换预览启动上传与预览World 与Spri…...

编程日记 2023/8/9 4:20:42

20天学会rust（三）没有object的rust怎么面向对象？

面向对象我们都很熟悉&#xff0c;可以说它是一种软件开发最重要的编程范式之一&#xff0c;它将程序中的数据和操作数据的方法组织成对象。面向对象有几个重要特性&#xff1a; 封装、继承和多态&#xff0c;基于这些特性带来了在可重用性、可维护性、扩展性、可靠性的优点。 …...

编程日记 2023/8/9 4:19:41

整数规划——第三章 全单模矩阵

整数规划——第三章 全单模矩阵 若线性规划问题的约束矩阵为全单模矩阵&#xff0c;则该问题可行域的顶点都是整数点&#xff0c;从而线性规划与整数规划的最优解相同。 3.1 全单模性与最优性 考虑线性整数规划问题&#xff1a; (IP) min ⁡ c T x , s . t . A x ≤ b , x …...

编程日记 2023/8/9 4:18:40

数据结构和算法

数据结构和算法目录表 CCJava线性结构 1. 数组、单链表和双链表 2. Linux内核中双向链表的经典实现 数组、单链表和双链表 数组、单链表和双链表 栈 栈 栈 队列 队列 队列树形结构 二叉查找树 二叉查找树 二叉查找树 AVL树 AVL树 AVL树 伸展树 伸展树 伸展树 1. 红黑树(一)之…...

编程日记 2023/8/9 4:17:39

[Vulnhub] matrix-breakout-2-morpheus

目录 <1> 信息收集 <2> getshell <3> Privilege Escalation&#xff08;提权&#xff09; <1> 信息收集 nmap -sP 192.168.236.0/24 扫描一下靶机ip 靶机ip: 192.168.236.154 nmap -A -p 1-65535 192.168.236.154 扫描一下靶机开放哪些服务 开放…...

编程日记 2023/8/9 4:16:37

JDK, JRE和JVM之间的区别和联系

JDK, JRE和JVM是与Java编程语言相关的三个重要的概念&#xff0c;它们分别代表Java Development Kit&#xff08;Java开发工具包&#xff09;、Java Runtime Environment&#xff08;Java运行时环境&#xff09;和Java虚拟机&#xff08;Java Virtual Machine&#xff09;。它们…...

编程日记 2023/8/9 4:15:36

mac电脑访问windows共享文件夹连接不上（设置445端口）

前提&#xff1a;首先需要保证mac和windows都在同一局域网内&#xff0c;如果不在肯定是连不上的&#xff0c;就不用往下看了。 事情是这样的&#xff0c;公司入职发了mac电脑&#xff0c;但是我是window重度用户&#xff0c;在折腾mac的过程中&#xff0c;有许多文件需要从wi…...

编程日记 2023/8/9 4:14:36

metersphere性能压测执行过程

(1) 首先在controller层&#xff0c;通过RunTestPlanRequest接收请求参数 PostMapping("/run")public String run(RequestBody RunTestPlanRequest request) (2) 在PerformanceTestService中的run中进行具体的逻辑处理&#xff0c; 首先根据请求中ID来获取库中存储…...

编程日记 2023/8/9 4:13:30

揭秘Word高级技巧：事半功倍的文字处理策略

Microsoft Word是一款广泛使用的文字处理软件&#xff0c;几乎每个人都有使用过它的经历。但是&#xff0c;你是否知道Word中隐藏着许多高级技巧和功能&#xff0c;可以帮助你事半功倍地处理文字&#xff1f;在本文中&#xff0c;我们将揭秘一些Word的高级技巧&#xff0c;让你…...

编程日记 2023/8/9 4:12:27

06-1_Qt 5.9 C++开发指南_对话框与多窗体设计_标准对话框

在一个完整的应用程序设计中&#xff0c;不可避免地会涉及多个窗体、对话框的设计和调用&#xff0c;如何设计和调用这些对话框和窗体是搞清楚一个庞大的应用程序设计的基础。本章将介绍对话框和多窗体设计、调用方式、数据传递等问题&#xff0c;主要包括以下几点。 Qt 提供的…...

编程日记 2023/8/9 4:11:26

模拟实现消息队列项目(系列7) -- 实现BrokerServer

目录 前言 1. 创建BrokerServer类 1.1 启动服务器 1.2 停止服务器 1.3 处理一个客户端的连接 1.3.1 解析请求得到Request对象 1.3.2 根据请求计算响应 1.3.3 将响应写回给客户端 1.3.4 遍历Session的哈希表,把断开的Socket对象的键值对进行删除 2. 处理订阅消息请求详解(补充) …...

编程日记 2023/8/9 4:10:25

vscode插件不能搜索安装

1 现象 vscode搜索自己的插件&#xff0c;报错&#xff1a; Error while fetching extensions. HXR failed2 原因 之前用vscode开发golang语言&#xff0c;设置了proxy代理&#xff0c;所以导致错误&#xff0c;删除即可 重启vscode 3 结果...

编程日记 2023/8/9 4:09:24

路由器工作原理(第二十九课)

路由器工作原理(第二十九课) 一图胜过千言 1） 路由：数据从一个网络到另外一个网络之间转发数据包的过程称为路由 2） 路由器：连接不同网络，实现不同网段之间的通信 3）路由表：路由器选择数据的传输路径的依据 原始的路由表 Destination/Mask Proto Pre Cost …...

编程日记 2023/8/9 4:08:23

linux log 日志

/* author: hjjdebug * date: 2023年 08月 08日 星期二 13:18:08 CST * descriptor: linux log 日志 * destinator: 搞清linux 下log 日志 * 下面代码编译通过即可运行 */ #include <stdio.h> #include <syslog.h> int main(void) { // 打开系统日志, 可…...

编程日记 2023/8/9 4:07:20

uniapp获取当前页面高度

设置动态高度:style"{height: pageHeightpx}" <view class"uni-content" :style"{height: pageHeightpx}" >... </view>获取当前页面高度&#xff1a; onLoad() {// 获取当前窗口高度this.pageHeight uni.getSystemInfoSync().wi…...

编程日记 2023/8/9 4:06:19

通信对抗新利器：HWG1在铁路高速领域的卓越应用

在现代化交通体系中&#xff0c;铁路、高速等关键领域的通信安全至关重要。为了应对复杂多变的电磁环境&#xff0c;确保通信系统的稳定运行&#xff0c;成都鼎讯信通科技有限公司推出了通信信号干扰模拟器HWG1&#xff0c;为交通领域的通信对抗训练提供了强有力的支持。HWG1通…...

编程新知 2026/5/22 21:33:11

Veo生成模糊/断帧/色偏？立刻停用默认设置！20年视频架构师紧急发布的5项必改Veo 2K/4K硬核配置

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Veo 2K/4K视频生成质量崩塌的根源诊断 当Veo模型在2K或4K分辨率下输出视频时&#xff0c;高频细节严重丢失、运动伪影显著增强、纹理结构模糊化&#xff0c;这一现象并非单纯算力不足所致&#xff0c;而…...

编程新知 2026/5/22 20:02:27

好用的长沙装修设计值得选的服务商

在装修设计领域&#xff0c;选择一家靠谱的服务商至关重要。长沙互知空间设计工作室&#xff0c;也就是长沙互知建筑设计有限公司&#xff0c;便是众多客户值得信赖的选择。下面将从几个方面详细分析它的优势&#xff0c;并与其他知名品牌进行对比&#xff0c;为大家提供一些实…...

编程新知 2026/5/22 19:54:19

15万个科技岗位消失的真相

周四早上7点43分&#xff0c;我的手机震动了一下&#xff0c;是一位同行的消息——另一位我认识了五年的数据团队负责人。他管理的团队规模是我的两倍&#xff0c;所在的公司你一定听说过。 消息只有四个字&#xff1a;“你的人安全吗&#xff1f;” 我立刻明白他的意思。Met…...

编程新知 2026/5/22 19:28:42

告别卡顿！Win11下用Process Lasso手动调度VMware虚拟机，榨干12/13代酷睿大小核性能

榨干12/13代酷睿潜力&#xff1a;Win11下VMware虚拟机性能调优实战指南 当你在Windows 11系统上运行VMware虚拟机时&#xff0c;是否遇到过这样的困扰&#xff1a;编译代码时进度条像蜗牛爬行&#xff0c;鼠标移动有明显的迟滞感&#xff0c;系统资源管理器显示CPU占用率并不高…...

编程新知 2026/5/22 18:36:12

终极指南：如何在ComfyUI中实现AI动作迁移与姿态控制

终极指南&#xff1a;如何在ComfyUI中实现AI动作迁移与姿态控制 【免费下载链接】ComfyUI-MimicMotionWrapper 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-MimicMotionWrapper ComfyUI-MimicMotionWrapper是一个基于腾讯MimicMotion技术的ComfyUI插件&#…...

编程新知 2026/5/22 18:16:02

AspectCore-Framework高级特性：参数拦截、异步切面、作用域管理

AspectCore-Framework高级特性&#xff1a;参数拦截、异步切面、作用域管理 【免费下载链接】AspectCore-Framework AspectCore is an AOP-based cross platform framework for .NET Standard. 项目地址: https://gitcode.com/gh_mirrors/as/AspectCore-Framework Aspec…...

编程新知 2026/5/22 17:39:59

c# while循环 do while循环

while循环//while循环 //while(){}&#xff1a;当小括号条件成立 执行{}里面的东西&#xff0c;条件不成立的时候&#xff0c;循环就结束了while (true) //true 就是永远成立 一直执行{} {Console.WriteLine("死循环");break; //跳出死循环 只会执行一次 }while (tru…...

编程新知 2026/5/22 16:41:30

通过curl命令快速测试Taotoken接口连通性与模型响应效果

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过curl命令快速测试Taotoken接口连通性与模型响应效果 对于开发者而言&#xff0c;在集成大模型服务时&#xff0c;快速验证接口…...

编程新知 2026/5/22 15:38:43

5分钟快速激活Cursor Pro：突破AI编程助手的终极破解方案

5分钟快速激活Cursor Pro&#xff1a;突破AI编程助手的终极破解方案 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your t…...

编程新知 2026/5/22 14:58:05