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

CSS BFC特性和应用

news 2026/2/1 14:21:41

目录

  • 1，介绍
  • 2，BFC布局规则
  • 3，创建BFC
  • 4，BFC应用
    • 1，浮动子元素使父级高度坍塌
    • 2，非浮动元素被浮动元素覆盖
    • 3，margin 合并
      • 1，父子 margin 合并：父级和第1个/最后1个子元素
      • 2，相邻兄弟元素的 margin 合并

1，介绍

BFC 就是页面上一块独立的容器，内部有自己的渲染布局规则。容器内外的元素不会相互影响。

2，BFC布局规则

  1. 内部的元素，在垂直方向上会依次放置。
  2. 元素在垂直方向上的距离由 margin 决定，同一个 BFC 的两个相邻元素的 margin 会重叠。
  3. BFC 区域不会和外部浮动元素重叠。
  4. 计算 BFC 高度时，浮动子元素也参与运算。

在标准流中的根元素 html 就是一个天然的 BFC 环境。

3，创建BFC

简单介绍下最常用的，更多的创建方式参考MDN-BFC。

属性属性值
float不为 none
positionabsolute 或 fixed
displayinline-block、flow-root、flex、grid、 table 等
overflow不为 visible 或 clip 的块级元素

无论哪种方式创建的BFC，都有一定的副作用。

只有 display: flow-root 是无副作用的，它的行为如同 root（在浏览器中是 html ）元素。

4，BFC应用

1，浮动子元素使父级高度坍塌

<style>.container {border: 2px solid black;}.item {float: left;width: 50px;height: 50px;background-color: salmon;}
</style><body><div class="container"><div class="item"></div></div>
</body>

表现：

在这里插入图片描述
解决：只需要将父元素设置为 BFC 即可。

.container {display: flow-root;
}

在这里插入图片描述

2，非浮动元素被浮动元素覆盖

对于浮动元素的特性来说，这是正常现象。

<style>.box1 {float: left;width: 100px;height: 100px;background-color: rgba(255, 255, 255, 0.75);border: 1px solid black;}.box2 {border: 2px solid red;}
</style><body><div class="box1"></div><div class="box2">求关注，下雪天的夏风</div>
</body>

表现：

在这里插入图片描述

但我们不想让非浮动元素 box2 被覆盖，所以可设置 box2 为 BFC 来解决。

.box2 {display: flow-root;
}

在这里插入图片描述

上面这种就是经典的两列布局实现方式之一。

3，margin 合并

MDN参考

margin 合并的3种情况，BFC可以解决前2种

  1. 父子 margin 合并：父级和第1个/最后1个子元素
  2. 相邻兄弟元素的 margin 合并
  3. 空块级元素的 margin 合并

1，父子 margin 合并：父级和第1个/最后1个子元素

<style>.container {background-color: skyblue;}.item {margin-top: 50px;width: 50px;height: 50px;background-color: salmon;}
</style><div>求关注，下雪天的夏风</div>
<div class="container"><div class="item"></div>
</div>

表现：父级“掉”下来了：

在这里插入图片描述

解决方式之一，就是将父级设置为 BFC。

.container {display: flow-root;
}

在这里插入图片描述

2，相邻兄弟元素的 margin 合并

<style>.box {width: 100px;height: 100px;background-color: salmon;}.box1 {margin-bottom: 50px;}.box2 {margin-top: 100px;}
</style>
<body><div class="box box1"></div><div class="box box2"></div>
</body>

表现，margin 并没有相加，而是合并取最大值：

在这里插入图片描述

解决：给其中一个元素增加父级，这样就回到了第1种情况。

<style>.container {display: flow-root;}
</style><div class="box box1"></div>
<div class="container"><div class="box box2"></div>
</div>

在这里插入图片描述

这里也说明第一种父子 margin 合并还有哪些解决办法（bottom 合并同理）：

  1. 父元素设置 border-top
  2. 父元素设置 padding-top
  3. 父元素和第一个子元素之间添加内联元素进行间隔。

以上。

相关文章：

CSS BFC特性和应用

目录 1&#xff0c;介绍2&#xff0c;BFC布局规则3&#xff0c;创建BFC4&#xff0c;BFC应用1&#xff0c;浮动子元素使父级高度坍塌2&#xff0c;非浮动元素被浮动元素覆盖3&#xff0c;margin 合并1&#xff0c;父子 margin 合并&#xff1a;父级和第1个/最后1个子元素2&…...

编程日记 2023/12/6 14:03:29

软件工程 - 第8章 面向对象建模 - 3 - 动态建模

状态图 状态是指在对象生命周期中满足某些条件、执行某些活动或等待某些事件的一个条件和状况 。 案例一&#xff1a;描述烧水器在工作时的详细行为细节 “人就是一个类&#xff0c;而你”、我”、张三”等都是“人这个类的一个实例&#xff0c;站着”、“躺着等都是对象的一…...

编程日记 2023/12/6 14:02:28

Stable Diffusion AI绘画系列【16】:霸气侧漏的二次元武侠风

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…...

编程日记 2023/12/6 14:00:26

第二证券：苹果市值重返3万亿美元，关键因素并非人工智能

当地时间12月5日&#xff0c;到美股收盘&#xff0c;苹果公司股价收涨2.1%&#xff0c;报193.42美元&#xff0c;收盘市值重返3万亿美元上方。 上一年12月&#xff0c;苹果公司市值曾在盘中时间短触及3万亿门槛&#xff0c;但收盘并未站稳&#xff0c;本年6月收盘时正式打破3万…...

编程日记 2023/12/6 13:59:23

西南科技大学C++程序设计实验六（ 继承与派生一）

一、实验目的 1. 理解不同继承属性对派生类访问基类成员的区别 2. 掌握单继承程序编写 二、实验任务 1、调试下列程序，并在对程序进行修改后再调试，指出调试中的出错原因（该题中A为基类，B为派生类，B以public方式继承A） 重点：理解不同继承方式数据的访问权限，派生类…...

编程日记 2023/12/6 13:57:20

MySQL 性能优化

未完待续... 1. 分库、分表结构优化 1.1 数据库设计 不规范的数据库设计存在数据冗余以及插入、更新、删除异常问题。 规范化&#xff08;Normalization&#xff09;是数据库设计的一系列原理和技术&#xff0c;主要用于减少表中数据的冗余&#xff0c;增加完整性和一致性&…...

编程日记 2023/12/6 13:56:20

求职招聘小程序源码系统 全开源源代码：找工作+招人才 平台级别运营版 附带完整的搭建教程

在当前的求职招聘市场中&#xff0c;尽管存在大量的求职者和招聘者&#xff0c;但依然存在着信息不对称、沟通不畅等问题。小编来给大家分享一款求职招聘小程序源码系统&#xff0c;旨在提供一个高效、便捷、安全的求职招聘平台。 以下是部分代码示例&#xff1a; 系统特色功能…...

编程日记 2023/12/6 13:54:18

26、卷积 - 实际上是一个特征提取器

矩阵乘法的本质是特征的融合&#xff0c;卷积算法的本质是特征的提取。 回想一下之前所有介绍卷积的时候&#xff0c;描述了一种卷积运算的场景&#xff0c;那就是一个窗口在图片上滑动&#xff0c;窗口中的数值是卷积核的参数&#xff0c;也就是权值。 卷积的计算本质是乘累…...

编程日记 2023/12/6 13:53:17

web前端之vue3

MENU vue3响应式数据的判断、isRef、isReactive、isReadonly、isProxy、ref、reactive、readonlyvue3的生命周期vue3手写isRef、isReactive、isReadonly、isProxyvue3手写ref、深的refvue3手写shallowRef、浅的refvue3customRefvue3readonly与shallowReadonlyvue3toRaw与markRa…...

编程日记 2023/12/6 13:51:15

原来在C++的类中声明函数时可以不写参数名只写参数类型

2023年12月6日&#xff0c;周三上午 今天才发现原来可以这样写 在C的类中声明函数时可以不写参数名只写参数类型&#xff0c; 但是&#xff0c;在实现时必须写出参数名。 #include<iostream>class People { public:void move(int);void say(std::string);void doSomet…...

编程日记 2023/12/6 13:48:13

独孤思维：这里有蓝海项目，你要吗？

很多人&#xff0c;一看到蓝海项目&#xff0c;就趋之若鹜。 觉得红海项目太卷了&#xff0c;根本赚不到钱。 凡是认为蓝海项目不卷&#xff0c;可以做起来&#xff0c;做的轻松的&#xff0c;都是弱智和无能的表现。 你所能接触到的蓝海&#xff0c;根本就不是蓝海。 能够…...

编程日记 2023/12/6 13:47:12

外卖平台推荐算法的优化与实践

目录 引言 一、推荐算法的原理 二、推荐算法的挑战 三、实际案例分析 四、优化推荐算法的策略 五、结论 引言 在当今数字化社会&#xff0c;外卖平台成为了人们生活中不可或缺的一部分。为了提供更加个性化、高效的服务&#xff0c;外卖平台使用推荐算法成为了一项关键技…...

编程日记 2023/12/6 13:46:10

CONTROLLING VISION-LANGUAGE MODELS FOR MULTI-TASK IMAGE RESTORATION

CONTROLLING VISION-LANGUAGE MODELS FOR MULTI-TASK IMAGE RESTORATION (Paper reading) Ziwei Luo, Uppsala University, ICLR under review(6663), Cited:None, Stars: 350, Code, Paper. 1. 前言 像CLIP这样的视觉语言模型已经显示出对零样本或无标签预测的各种下游任务…...

编程日记 2023/12/6 13:44:08

HarmonyOS应用开发——页面

我们将对于多页面以及更多有趣的功能展开叙述&#xff0c;这次我们对于 HarmonyOS 的很多有趣常用组件并引出一些其他概念以及解决方案、页面跳转传值、生命周期、启动模式&#xff08;UiAbility&#xff09;&#xff0c;样式的书写、状态管理以及动画等方面进行探讨 页面之间…...

编程日记 2023/12/6 13:43:07

Java流Stream使用详解（练习）

练习 第一题 数据过滤 定义一个集合&#xff0c;并添加一些整数1,2,3,4,5,6,7,8,9,10过滤奇数&#xff0c;只留下偶数&#xff0c;并将结果保存起来 import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.stream.Collectors…...

编程日记 2023/12/6 13:41:06

请介绍一下MySQL的存储引擎及其特点

问题&#xff1a;请介绍一下MySQL的存储引擎及其特点。 回答&#xff1a; MySQL是一个开源的关系型数据库管理系统&#xff0c;它支持多种存储引擎&#xff0c;每个存储引擎都有其自身的特点和适用场景。下面是对MySQL常见存储引擎的简要介绍&#xff1a; InnoDB&#xff1a; …...

编程日记 2023/12/6 13:39:04

Python---魔术方法

1、什么是魔术方法 在Python中&#xff0c;__xxx__()的函数叫做魔法方法&#xff0c;指的是具有特殊功能的函数。 2、__init__()方法(初始化方法或构造方法) 思考&#xff1a;人的姓名、年龄等信息都是与生俱来的属性&#xff0c;可不可以在生产过程中就赋予这些属性呢&…...

编程日记 2023/12/6 13:38:03

手把手教你注册意大利商标

在当今全球商业环境中&#xff0c;拥有一个独特的商标可以为企业在市场竞争中提供重要优势。商标作为品牌形象的核心&#xff0c;有助于吸引潜在客户&#xff0c;提升品牌价值&#xff0c;增加客户忠诚度。在意大利&#xff0c;商标注册同样具有重要意义&#xff0c;它能为企业…...

编程日记 2023/12/6 13:35:00

pandas详细笔记

一&#xff1a;什么是Pandas from matplotlib import pyplot import numpy as np import pandas as pdarange np.arange(1, 10, 2) series pd.Series(arange,indexlist("ABCDE")) print(series)二&#xff1a;索引 三&#xff1a;切片 位置索引切片&#xff08;左闭…...

编程日记 2023/12/6 13:34:00

win11安装（未完待续）

学习补丁 test.bat 运行后需要重启 slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX slmgr /skms kms.03k.org slmgr /ato 文件扩展名 主题 性能设置 开始按钮靠左 任务栏对齐方式-靠左 必备软件 f.lux redshift 360管家 驱动精灵 edge c*lash&#xff08;v2*ray不支持w…...

编程日记 2023/12/6 13:32:58

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2026/1/27 16:41:02

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/1/23 11:47:13

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2026/1/25 2:04:42

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2026/1/25 3:29:22

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

编程新知 2025/11/27 20:15:13

负载均衡器》》LVS、Nginx、HAproxy 区别

虚拟主机 先4&#xff0c;后7...

编程新知 2026/2/1 11:59:21

StarRocks 全面向量化执行引擎深度解析

StarRocks 全面向量化执行引擎深度解析 StarRocks 的向量化执行引擎是其高性能的核心设计&#xff0c;相比传统行式处理引擎&#xff08;如MySQL&#xff09;&#xff0c;性能可提升 5-10倍。以下是分层拆解&#xff1a; 1. 向量化 vs 传统行式处理 维度行式处理向量化处理数…...

编程新知 2025/12/25 15:36:09

Qt Quick Controls模块功能及架构

Qt Quick Controls是Qt Quick的一个附加模块&#xff0c;提供了一套用于构建完整用户界面的UI控件。在Qt 6.0中&#xff0c;这个模块经历了重大重构和改进。 一、主要功能和特点 1. 架构重构 完全重写了底层架构&#xff0c;与Qt Quick更紧密集成 移除了对Qt Widgets的依赖&…...

编程新知 2026/1/9 11:24:56