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

CSS BFC特性和应用

news 2025/10/22 13:59:40

1，介绍

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

2，BFC布局规则

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

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

3，创建BFC

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

属性	属性值
`float`	不为 `none`
`position`	`absolute` 或 `fixed`
`display`	`inline-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种

父子 margin 合并：父级和第1个/最后1个子元素
相邻兄弟元素的 margin 合并
空块级元素的 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 合并同理）：

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

以上。

CSS BFC特性和应用

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

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

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

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

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

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

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

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

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

当地时间12月5日，到美股收盘，苹果公司股价收涨2.1%，报193.42美元，收盘市值重返3万亿美元上方。上一年12月，苹果公司市值曾在盘中时间短触及3万亿门槛，但收盘并未站稳，本年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 数据库设计不规范的数据库设计存在数据冗余以及插入、更新、删除异常问题。规范化（Normalization）是数据库设计的一系列原理和技术，主要用于减少表中数据的冗余，增加完整性和一致性&…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

编程日记 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应用开发——页面

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

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

Java流Stream使用详解（练习）

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

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

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

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

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

Python---魔术方法

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

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

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

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

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

pandas详细笔记

一：什么是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)二：索引三：切片位置索引切片（左闭…...

编程日记 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（v2*ray不支持w…...

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

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文｜魏琳华编｜王一粟一场大会，聚集了中国多模态大模型的“半壁江山”。智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...

编程新知 2025/10/22 5:35:12

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风，以**「云启出海，智联未来｜打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办，现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/10/15 14:10:21

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/9/30 12:05:28

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式：数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本模型并行：将模型分割到不同设备，每个设备处理部分模型计算现代大模型训练通常结合…...

编程新知 2025/7/23 19:14:14

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。多个 Bean 的依赖关系构成环形链路，例如：双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本方法1：通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分，设置 Gradle JDK 方法2：通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/7/10 0:32:50

渗透实战PortSwigger靶场：lab13存储型DOM XSS详解

进来是需要留言的，先用做简单的 html 标签测试发现面的</h1>不见了数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码，输入的<>当成字符串处理回显到页面中，看来只是把用户输…...

编程新知 2025/9/28 4:06:00

全面解析数据库：从基础概念到前沿应用

在数字化时代，数据已成为企业和社会发展的核心资产，而数据库作为存储、管理和处理数据的关键工具，在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理，到社交网络的用户数据存储，再到金融行业的交易记录处理&a…...

编程新知 2025/9/19 11:48:17

Linux 下 DMA 内存映射浅析

序系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存，但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。关于 dma_alloc_coherent 接口详细的代码讲解、调用流程，可以参考这篇文章，我觉得写的非常…...

编程新知 2025/10/18 3:53:21

目录

1，介绍

2，BFC布局规则

3，创建BFC

4，BFC应用

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

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

3，margin 合并

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

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

相关文章：