面试官：请说说什么是BFC？大白话讲清楚 - 掘金
2021年4月12日 · BFC 全称：Block Formatting Context， 名为 "块级格式化上下文"。 W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行 …
CSS中的BFC是什么？怎么用？BFC（Block Formatting Context）块格式化上下文， BFC …
2021年11月16日 · BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。 html： css： width: 100px; height: 100px; background-color: green; margin-bottom: 10px; .div2 { width: 100px; height: 100px; background-color: red; margin-top: 20px; 对第一个div的margin-bottom设置为10px，第二个div的margin-top设置为20px，我们可以看到两个盒子最终的边距是20px，是两 …
区块格式化上下文 - CSS：层叠样式表 | MDN - MDN Web Docs
区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 下列方式会创建块格式化上下文： 文档的根元素（<html>）。 浮动元素（即 float 值不为 none 的元素）。
别只知道KFC，你还应该知道BFC，FFC，GFC和IFC - 知乎
一个HTML元素可以创建一个新的BFC，这样它的内部布局就可以独立于父元素和兄弟元素进行计算。 以下是几种触发BFC的方法： 清除浮动. 在CSS布局中，浮动（float）是一种常见的布局技术，它允许元素脱离正常的文档流，并向左或右移动，直到它的外边缘碰到包含块或另一个浮动框的边框为止。 然而，浮动元素可能会导致父容器的高度塌陷，即父容器的高度没有正确地包含浮动子元素的高度。 我们可以通过创建新的BFC来解决这个问题。 .one { float: left; width:180px; …
BFC是什么？有哪些应用场景？一次搞懂BFC，通俗易懂！-CSDN …
2023年9月14日 · BFC（Block Formatting Context）中文译为"块级格式化上下文"，简单来说，BFC就是给盒子加一个属性，让盒子变成一块独立渲染的区域，可以理解为一个箱子，箱子里面物品的摆放是不受外界的影响的，其中外边距（margin）也是BFC区域的一部分。
一文大白话讲清楚块级格式化上下文（BFC,Block Formatting …
2024年12月30日 · 块级格式化上下文 （BFC）是WEB页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 具有 BFC 特性的元素可以看作是隔离了的独立容器（想象成一个独立的箱子），容器内的元素不会在布局上影响到外面的元素（你里箱子里面的物品如何怎么摆放都不会影响到外面），并且 BFC 具有普通容器所没有的一些特性，且同一个元素不可能同时存在于两个 BFC 中。 针对 BFC 网上有特别多的说法，但是都没 …
彻底理解 BFC：触发条件、核心特性与开发实践BFC（Block …
2025年3月7日 · BFC（Block Formatting Context，块级格式化上下文）是 CSS 中控制元素布局的重要概念。 本文将通过 触发条件深度解析、高频误区拆解 和 实战场景建议，帮你真正掌握 BFC 的
前端 - BFC与IFC概念理解+布局规则+形成方法+用处 - 一只瓦罐
2017年5月24日 · 想要理解BFC与IFC，首先要理解另外两个概念： Box 和 FC （即 formatting context）。 一个页面是由很多个 Box 组成的，元素的类型和 display 属性决定了这个 Box 的类型。 不同类型的 Box，会参与不同的 Formatting Context。 Block level 的box会参与形成BFC，比如 display 值为 block，list-item，table 的元素。 Inline level 的box会参与形成IFC，比如 display 值为 inline，inline-table，inline-block 的元素。 参考： W3C文档block-level.
前端 - 理解 CSS 布局和 BFC - 终身学习者 - SegmentFault 思否
2019年3月27日 · 在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。 W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。 BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所 …
CSS：深入理解 BFC 的概念以及创建方式 - 知乎 - 知乎专栏
BFC 被用烂了的 2 个场景分别是清除浮动影响（clear the floats）和避免外边距合并（prevent margins collapsing）。 接下来，我们对这 2 个场景分别进行介绍，在实战中体会 BFC 的作用。