CSS之BFC的应用之一清除浮动

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 300+累计阅读 325平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄10年

关注

原创最新推荐文章于 2026-05-12 12:47:19 发布 325 阅读 AI 写同款· GEO 优化 ›

CSS之浮动/BFC/清除浮动（十二）该文先讲解了CSS布局的几种策略，以及正常布局流是什么，然后逐步讲解浮动的由来，本质，如何产生，以及特性，随后讲解BFC规范，如何创建BFC，BFC的作用，最后列出清除浮动的几种方法。阅读详情

阅读前提: 对CSS的BFC有一定的了解

当元素设置了浮动后，会脱离正常的文档流，影响到父级元素以外的元素

通过设置父级元素为overflow:auto，虽然创造了BFC但是不够明确而且会出现副作用，可以直接设置父级元素的display:flow-root,明确的说明创造了BFC

举例1，详细的说明可以查看Codepen上的例子

参考链接

1.CSS布局指南

2.display: flow-root

收录于

css

当前文章被收录于：

css

7 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

一文读懂《CSS中的BFC》 BFC是CSS布局中的核心机制之一,通过创建独立的渲染区域解决布局冲突问题.BFC触发条件根据具体场景选用,避免出现副作用BFC的四大核心特性包括外边距合并、清除浮动、自适应两栏布局、防止文本环绕等IFC是CSS处理行内元素布局的核心机制,通过控制水平排列、垂直对齐和自动换行，实现文本、图片等内容的自然流布局.其规则与 BFC 互补，共同构建了 CSS 的格式化上下文体系‌。阅读详情

相关推荐

BFC:什么是BFC？BFC作用？如何触发BFC？BFC应用场景

YSbnhoffer的博客 1515

BFC与清除浮动

欢迎访文我的博客YangChen’s Blog快投简历了，到时候肯定避免不了要笔试或者面试一些前端题目，所以呢有空把一些基础知识总结下这次说到的是BFC和清除浮动BFC首先说一下什么是BFC,引用下别人的概念 BFC（Block Formatting Context）直译为“块级格式化范围”。它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒

yc123h的博客 2220

【AIOPS实战】Dify+Zabbix：构建智能告警分析助手的核心架构与实现

本文详细介绍了如何利用Dify平台与Zabbix-MCP接口构建智能告警分析助手，实现自然语言查询告警、智能分析和报告生成。该系统通过AIOPS技术显著提升运维效率，支持中英文混合查询、自动根因分析，并内置多种优化方案确保稳定可靠。

weixin_29238147的博客 315

盒模型，BFC，清除浮动

什么是个模型在html中的每一个元素都可以看成盒模型盒模型分为标准盒模型，js盒模型和怪异盒模型标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右) 怪异模式下：一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）标准盒模型和怪异盒模型之间的转换 box-sizing:content-box; 将采用标准模式的盒子模型标准 box-s

yangpengze的博客 170

S7-1200模拟量

将两种不同的金属或合金金属焊接起来，构成一个闭合回路，利用温差电动势来测量温度，当两端存在温度梯度时，回路中就会有电流通过，此时两端之间就存在电动势--热电动势，这就是所谓的塞贝克效应（seebeck effect）。温差越大，热电动势越高。热电偶是有正负极性的，所以需要确保导线连接到正确的极性，否则会造成明显的测量误差。为了使温度补偿达到最佳效果，必须将热电偶模块安装在温度稳定的环境中简述：两种金属，每一种金属随温度变化是不同的，出现温差--由俩金属构成的回路就会有电流经过，因此两端形成热电动势。

王阿妹小天才的博客 2591

动态知识图谱构建：从本体论到工程实践

知识图谱作为语义网和人工智能领域的核心技术，旨在通过结构化的方式表示和组织知识。其核心原理在于将实体、概念及其关系建模为图结构，从而支持复杂的语义推理和关联查询。这一技术为机器理解数据间的深层联系提供了基础，在智能推荐、企业知识管理和学术研究等领域具有重要价值。通过结合自然语言处理（NLP）和图数据库技术，系统能够从非结构化数据中自动抽取知识，并构建动态演化的认知网络。本文以“本体论章鱼”项目为例，探讨了如何实现从静态本体到动态知识网络的范式转变，并详细解析了其分布式感知、适应性学习的架构设计，为构建灵活可

weixin_30731305的博客 656

CSS清除浮动原理(涉及BFC)和方法

为什么要清除浮动？？首先理解浮动框：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云

jlin991的博客 3271

QT项目实战：如何在正点原子Linux开发板上集成CVR-100UC身份证阅读器（附完整代码）

本文详细介绍了在正点原子Linux开发板上集成CVR-100UC身份证阅读器的完整实战流程。内容涵盖驱动适配、库文件部署、QT项目框架搭建、核心功能封装以及界面集成，并提供了完整的代码示例，帮助开发者快速实现嵌入式环境下的身份证信息读取功能。

yyy34的博客 257

【html/css】从清除浮动讲解 BFC 原理及应用

CSS中清楚浮动在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼 1 浮动带来布局的便利，却也带来了新问题 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl...

Umbrella_Um的博客 361

星网锐捷语音网关密码重置全攻略：两种高效恢复出厂设置方法详解

本文详细解析了星网锐捷语音网关密码重置的两种高效方法，包括通过eth1通用口和eth0管理口的操作步骤。针对不同型号设备，提供硬件连接、Web控制台登录及CRT工具使用的具体指南，帮助用户快速恢复出厂设置并重建语音环境配置。

weixin_28698059的博客 528

不只是驱动：拆解AIC8800 WiFi模组在RK Android系统的完整启动链（从DTS到HAL）

本文深入解析了AIC8800 WiFi模组在RK Android系统中的完整启动链，从设备树(DTS)配置到HAL层适配，涵盖驱动移植、固件加载及用户空间服务协同等关键环节。通过详细的技术分析和调试技巧，帮助开发者解决RK平台与AIC8800模组的兼容性问题，优化WiFi子系统性能。

weixin_30439067的博客 492

BFC块级格式化上下文详解及应用

BFC（块级格式化上下文）是CSS布局中的重要概念，它创建一个独立的渲染区域，具有特定规则：包含浮动元素、阻止外边距折叠、不与浮动元素重叠。触发BFC的方式包括设置overflow非visible、浮动、绝对定位等属性。BFC常用于解决三大布局问题：1）清除浮动（防止父元素高度塌陷）；2）避免相邻元素外边距合并；3）实现自适应多栏布局（不与浮动栏重叠）。掌握BFC机制能有效应对常见CSS布局挑战，是现代网页开发的核心技能之一。现代方案推荐使用display:flow-root创建BFC，副作用最小。

hnsfdxweb3的博客 1160

手把手教你学Simulink--巴特沃斯滤波器设计与实现仿真

巴特沃斯滤波器的设计目标是拥有尽可能平滑的通带响应，这意味着在通带内信号衰减最小且没有波动。这种类型的滤波器非常适合用于音频处理、生物医学信号处理以及其他需要高保真度的应用场景。根据应用需求的不同，可以选择低通、高通、带通或带阻滤波器。明确你的系统需求，如输入信号类型（正弦波、方波等）、滤波器类型（低通、高通、带通或带阻）、截止频率、滤波器阶数等。假设我们需要设计一个4阶低通巴特沃斯滤波器，其截止频率为1kHz，用来过滤掉高于1kHz的所有频率成分。

MHD0815的博客 450

【css】清除浮动及BFC

【css】清除浮动及BFC 文章目录【css】清除浮动及BFC一、理解BFCBFC的定义：BFC的渲染规则：创建 BFC 的条件：BFC 的作用：1.用BFC防止垂直 margin 合并2.解决高度塌陷的问题：3.利用BFC清除浮动二、清除浮动1.给父级元素定义height属性2.在最后一个浮动元素之后添加一个空的div标签，并添加clear：both样式3.包含浮动元素的父级标签添加overflow:hidden或者overflow:auto4.使用 ::after 伪类为父元素添加后标签，实现清除浮动

前端学习博客 1457

学Simulink——基于Simulink的AUTOSAR架构下电机控制软件组件建模

本文详细介绍了在Simulink中基于AUTOSAR架构开发电机控制软件组件(SWC)的全流程。主要内容包括：首先阐述了AUTOSAR架构对汽车电子系统开发的价值，包括提高软件复用率、降低集成成本和改善验证环境。然后重点讲解了在Simulink中构建电机控制SWC的具体步骤：从创建AUTOSAR组件模型、定义数据端口和服务端口，到搭建FOC控制算法、配置运行实体，最后生成AUTOSAR描述文件和验证RTE接口。文章还提供了与基础软件(BSW)的集成方案、工程实践要点和常见问题解决方案，并以大众MEB平台等实

amy_mhd的博客 67

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

【CSS】CSS中的BFC，是什么？

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。BFC 即 Block Formatting Contexts (块级格式化上下文)，属于普通流。可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

weixin_55639808的博客 1727

假人有限元模型

假人模型，车辆碰撞假人有限元模型，适合做乘员安全的研究者利用

CSS篇：CSS深层解析：BFC是什么？为什么能清除浮动？

在CSS布局中，BFC（Block Formatting Context，块级格式化上下文）是一个非常重要的概念，它不仅影响元素的渲染方式，还是解决浮动塌陷、外边距重叠等问题的关键。本文将深入解析BFC的原理、触发条件，并详细讲解如何利用BFC清除浮动。

欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。 1279

android 蓝牙通讯demo

android 下蓝牙通讯demo，实现了发现蓝牙，使能蓝牙，通过蓝牙发送消息。

知道什么事BFC吗

BFC（Block Formatting Context，块格式化上下文）是 CSS 中一种非常重要的概念，用于布局和清除浮动。它是页面中的一个独立渲染区域，拥有自己的格式化规则。BFC 的特点和规则对解决许多布局问题非常有用，比如清除浮动、避免外边距重叠等。

qq_25416827的博客 346

BFC与浮动

一、BFC的含义 BFC(block formatting contexts）块级元素格式化上下文，它决定了块级元素如何对它的内容进行布局，以及与其它元素的关系和相互作用。块级元素：父级（是一个块元素）内容：子元素（是一个块元素）其它元素：与内容同级别的兄弟元素相互作用：BFC里的元素与外面的元素不会发生影响二、浮动触发条件 1.float的值不为none...

apzlm9110的博客 616

css布局中的BFC问题

css布局中的BFC问题 1. 面试题—双边距（边距重叠）什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？边距重叠：两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。有两种边距重叠的情况： 1. 父子关系的边距重叠父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距给父元素添加 overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距 <

WLIULIANBO的博客 182

BFC问题

定义BFC：首先解释BFC是CSS中的一种布局机制，它决定了内部元素的布局和相互作用。列举BFC的形成条件：然后列举出触发BFC的条件，如浮动、绝对定位、overflow不为visible等。描述BFC的特性：接着描述BFC的特性，如区域不会与浮动元素重叠、内部块级元素垂直排列等。列举BFC的应用场景：最后列举出BFC的应用场景，如清除浮动、解决外边距折叠问题、实现多列布局等。

m0_52644825的博客 159

CSS浮动与BFC

这样有需要就加上这个空盒子，但是这样就加了一大堆混淆内容的空盒子不利于内容与样式的分离，然后学习了css中：after这一属性后就采取全部用css来清除浮动了，html代码变为:CSS代码:clear:both;content:‘’;height: 0;这样后续只需在父元素中引入clear类就可以了，更加方便。

2401_85123486的博客 860

彻底搞懂CSS里的BFC

BFC是css中比较重要的一个概念，它不但能解决很多问题，还可以解释CSS中一些诡异的地方，所以搞懂BFC对于学习css来说是很有必要的，以下从【概念】【规则】【创建】【使用】等方面对BFC做了一些总结，希望对你能有所帮助！

1166

【css】浮动与clearfix（清除浮动）

我们首先要知道，在浮动布局中父元素的高度默认是被子元素撑开的。当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑开父元素的高度，导致父元素的高度丢失，高度丢失以后，其下的元素会自动上移，导致页面混乱。container之中包含一个 item 子元素，代码如下item此时，我给 item 加了 margin-top: 30px ，本来这时候我期待的结果是，item 块本身应该距离 container 青色区域的上边界 30px。

m0_62811051的博客 1579

BFC（块级格式化上下文）

BFC（Block Formatting Context）是一个 CSS 布局概念，用于描述元素的布局规则和其包含子元素的方式。它是一个独立的渲染区域，在这个区域内，元素的布局不会影响到外部的元素，反之亦然。BFC 主要用于控制浮动元素、清除浮动、避免元素重叠等问题。

Seveny07的博客 967

上一篇： var,let,const

下一篇：多维数组求最大值