[css] 第7天简述你对BFC规范的理解 #20

haizhilin2013 · 2019-04-22T20:56:19Z

第7天简述你对BFC规范的理解

yxkhaha · 2019-04-23T15:22:08Z

是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它。

形成条件（任意一条）

float的值不是none
position 的值不是static或者relative
display的值是inline-block,table-cell,flex,table-caption或者inline-flex
overflow的值不是visible

特性

内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

DarthVaderrr · 2019-07-03T08:20:01Z

<div style="width:60px;height:60px;">
    <div style="margin:20px;width:20px;height:20px;"></div>
</div>

以上两个盒子产生的布局效果：内部盒子并不居中，而是上边框紧贴着外部盒子

对外部盒子采用BFC规则，可以解决问题，方法之一：增加一个overflow：auto样式：

  <div style="width:60px;height:60px;background: green;overflow: auto">
            <div style="margin:20px;width:20px;height:20px;background: red"></div>
    </div>

上面的两个盒子布局，由于外部是BFC元素，所以内部盒子会完全居中显示

Konata9 · 2019-07-24T03:49:17Z

BFC 全称“块级格式化上下文”(Block Formatting Context)，对应的还有 IFC。BFC 类似一个“结界”，如果一个 DOM 元素具有 BFC，那么它内部的子元素不会影响外面的元素；外面的元素也不会影响到其内部元素。

最常见的例子就是清除 float 的 overflow: hidden; 属性。overflow: hidden; 会触发元素的 BFC，因此其内部的 float 元素不会影响到外部元素的布局。

触发 BFC 的条件：

<html> 根元素
float 不为 none
overflow 为 auto,scroll,hidden
display 的值为 table-cell, table-caption,inline-block 中任何一个
position 的值不为 static 和 relative

BFC 可以实现更加健壮的自适应布局。

参考文章：《CSS 世界》

Daniel-Fang · 2019-09-19T09:00:03Z

特性
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
- BFC的区域不会与float的元素区域重叠
形成条件
- html 根元素
- float的值不是none
- position 的值不是static或者relative
- display的值是inline-block,table-cell,table-caption,flex,inline-flex
- overflow的值不是visible
应用场景
- 解决浮动子元素导致父元素，高度坍塌的问题
- 解决文字环绕在float 四周的情况
- 解决边距重叠问题（父子，兄弟，空元素等）

censek · 2019-10-08T02:34:20Z

https://www.jianshu.com/p/0d713b32cd0d

nikolausliu · 2019-11-28T07:18:42Z

MDN 的解释
浮动、清除浮动只影响同一 BFC 内的元素。外边距折叠也只会发生在同一 BFC 内的元素之间。
mdn 列举了很多可以形成 bfc 的条件，我只记两个：overflow:auto和display:flow-root。display:flow-root可以无副作用的创建一个 BFC，其它的条件有它本来的职责可能会产生副作用。

crazyming9528 · 2019-12-18T15:37:54Z

是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它。

形成条件（任意一条）

float的值不是none

position 的值不是static或者relative

display的值是inline-block,table-cell,flex,table-caption或者inline-flex

overflow的值不是visible

特性

内部的盒子会在垂直方向上一个接一个的放置

对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。

每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此

BFC的区域不会与float的元素区域重叠

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

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

bfc与元素margin重叠没有关系,参考:https://demo.crazyming.com/?link=topic/d7/bfc.html

crazyming9528 · 2019-12-18T15:38:31Z

特性

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

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

BFC的区域不会与float的元素区域重叠

形成条件

html 根元素

float的值不是none

position 的值不是static或者relative

display的值是inline-block,table-cell,table-caption,flex,inline-flex

overflow的值不是visible

应用场景

解决浮动子元素导致父元素，高度坍塌的问题

解决文字环绕在float 四周的情况

解决边距重叠问题（父子，兄弟，空元素等）

bfc与元素margin重叠没有关系,参考:https://demo.crazyming.com/?link=topic/d7/bfc.html

zxl-lxz · 2020-03-24T02:42:26Z

什么是BFC

块级格式化上下文

BFC的特性（作用）

同属于一个BFC的两个块级盒子，在垂直方向上会发生margin重叠。

给其中一个盒子放入另外一个BFC中，解决margin重叠

浮动元素是一个单独的BFC。两个BFC之间不会影响。

解决浮动元素浮在其它元素表面上的问题。一般用于图文环绕。

计算BFC的高度时，浮动元素也计算在内。

给浮元素触发BFC。解决高度塌陷问题。

如何触发BFC

HTML本身就是BFC
浮动元素
绝对定位元素（absolute/fixed）
overflow取值不为visible
display:

flex
inlineblock
grid
flow-root
table等等

larry0442 · 2020-04-07T03:26:33Z

下列方式会创建块格式化上下文：

根元素()
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC）。

bfc: 块级格式化上下文

子元素不影响外界，反之亦然

使用可以解决

margin 重叠
高度塌陷
与浮动有关的布局问题（忘记了）

blueRoach · 2020-05-21T08:44:46Z

BFC是一个独立的盒子，他内部有自己的一套规则，不受外部影响
应用：可以用于解决同一个BFC下，两个元素margin重叠的问题
BFC不会与浮动元素重叠
应用：右侧自适应两列布局
BFC元素计算高度时，会将浮动元素也一起计算
应用：用于解决非BFC内部的BFC盒子，外部会塌陷的问题

以下之一会形成BFC：

文档的根元素（）。
浮点数（元素float不是none）。
绝对定位的元素（元素position为is absolute或fixed）。
内联块（带有的元素）。display: inline-block
表格单元格（带有的元素，这是HTML表格单元格的默认设置）。display: table-cell
表格标题（带有的元素，这是HTML表格标题的默认设置）。display: table-caption
通过与元素隐式创建匿名表格单元格，，，，（这是HTML表，表中的行，表体，表头和表页脚，分别默认值），或。display: tabletable-rowtable-row-grouptable-header-grouptable-footer-groupinline-table
块元素overflow的值不是visible。
display: flow-root。此属性会创建一个BFC，且没有任何副作用------！！！
与元素，或。contain: layoutcontentpaint
弹性项目（元素的直接子项带有或）。display: flexinline-flex
网格项（元素的直接子项带有或）。display: gridinline-grid
Multicol容器（元素存在column-count或column-width不存在auto，包括带有的元素column-count: 1）。
column-span: all即使column-span: all元素不在multicol容器中（规范更改，Chrome bug），也应始终创建新的格式设置上下文。

giggleCYT · 2020-06-01T07:56:33Z

块格式化上下文（BlockFormattingContext，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲
•BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。
•如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

allenGKC · 2020-08-28T05:43:55Z

可以看看我写的这篇关于BFC博客：从Float谈谈BFC

smile-2008 · 2020-09-01T01:57:20Z

什么是BFC
块级格式化上下文

BFC的特性（作用）
同属于一个BFC的两个块级盒子，在垂直方向上会发生margin重叠。
给其中一个盒子放入另外一个BFC中，解决margin重叠

浮动元素是一个单独的BFC。两个BFC之间不会影响。
解决浮动元素浮在其它元素表面上的问题。一般用于图文环绕。

计算BFC的高度时，浮动元素也计算在内。
给浮元素触发BFC。解决高度塌陷问题。

如何触发BFC
HTML本身就是BFC
浮动元素
绝对定位元素（absolute/fixed）
overflow取值不为visible
display:
flex
inlineblock
grid
flow-root
table等等

amikly · 2021-10-25T11:31:46Z

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其它元素交互的区域.

通俗来说，BFC 类似一个“结界”，如果一个 DOM 元素具有 BFC，那么它内部的子元素不会影响外面的元素；外面的元素也不会影响到其内部元素

作用

使BFC内部浮动元素不会到处乱跑，BFC就是页面上的一个隔离的独立容器
和浮动元素产生边界，BFC的区域不会float的元素区域重叠
使子元素不会导致父元素的高度塌陷，计算BFC的高度时，浮动子元素也参与计算

形成条件

浮动元素：float 不为 none
绝对定位元素：position 为 absolute 或fixed
行内块元素：display 为 inline-block
overflow 计算值不为 visible 的块元素
弹性元素：display 为 flex 或 inline-flex 元素的直接子元素
网格元素：display 为 grid 或 inline-grid 元素的直接子元素
根元素：<html>）
表格单元格：display 为 table-cell（默认值）
表格标题：display 为 table-caption（默认值）
匿名表格单元格元素：display 为 table、table-row、table-row-group、table-header-group、table-footer-group 或 inline-table
display 为 flow-root 的元素
contain 为 layout、content 或 paint
多列容器：元素的 column-count 或 column-width 不为 auto
column 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

www-wanglong · 2022-06-18T09:04:22Z

BFC 是css中的一种渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响它。

形成的条件

float的值不是none
绝对定位元素： position的值不是static或者relative
display的值为inline-block、flex、table-cell
overflow除了visible

BFC的应用

同一个BFC下外边距会发生重叠
计算BFC高度，浮动的元素也会参与
BFC可以阻止元素被浮动元素覆盖

WangXi01 · 2022-07-12T09:50:30Z

BFC 类似一个“结界”，如果一个 DOM 元素具有 BFC，那么它内部的子元素不会影响外面的元素；外面的元素也不会影响到其内部元素。
应用场景：

解决子元素浮动导致的父元素坍塌
margin重叠
文字环绕问题

Iambecauseyouare · 2023-02-14T02:44:00Z

BFC即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，BFC的目的时形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

lili-0923 · 2024-02-02T06:16:30Z

一、BFC是什么

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

二、触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position 为 absolute、fixed
display 为 flex、inline-flex、inline-block、table-caption、table-cell
overflow 为 hidden、auto、scroll (除了 visible 以外的值)

三、应用场景

解决浮动子元素导致父元素，高度坍塌的问题
解决文字环绕在float 四周的情况
解决边距重叠问题（父子，兄弟，空元素等）

zivenday mentioned this issue Aug 10, 2019

简述你对BFC规范的理解 zivenday/learning#20

Open

haizhilin2013 mentioned this issue Jun 26, 2020

[css] 第438天如何形成BFC？ #2567

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css] 第7天简述你对BFC规范的理解 #20

[css] 第7天简述你对BFC规范的理解 #20

haizhilin2013 commented Apr 22, 2019

yxkhaha commented Apr 23, 2019

DarthVaderrr commented Jul 3, 2019 •

edited

Loading

Konata9 commented Jul 24, 2019

Daniel-Fang commented Sep 19, 2019

censek commented Oct 8, 2019

nikolausliu commented Nov 28, 2019

crazyming9528 commented Dec 18, 2019

形成条件（任意一条）

特性

crazyming9528 commented Dec 18, 2019

zxl-lxz commented Mar 24, 2020 •

edited

Loading

larry0442 commented Apr 7, 2020

blueRoach commented May 21, 2020 •

edited

Loading

giggleCYT commented Jun 1, 2020

allenGKC commented Aug 28, 2020

smile-2008 commented Sep 1, 2020

amikly commented Oct 25, 2021

www-wanglong commented Jun 18, 2022

WangXi01 commented Jul 12, 2022

Iambecauseyouare commented Feb 14, 2023

lili-0923 commented Feb 2, 2024

[css] 第7天 简述你对BFC规范的理解 #20

[css] 第7天 简述你对BFC规范的理解 #20

Comments

haizhilin2013 commented Apr 22, 2019

yxkhaha commented Apr 23, 2019

形成条件（任意一条）

特性

DarthVaderrr commented Jul 3, 2019 • edited Loading

Konata9 commented Jul 24, 2019

Daniel-Fang commented Sep 19, 2019

censek commented Oct 8, 2019

nikolausliu commented Nov 28, 2019

crazyming9528 commented Dec 18, 2019

形成条件（任意一条）

特性

crazyming9528 commented Dec 18, 2019

zxl-lxz commented Mar 24, 2020 • edited Loading

什么是BFC

BFC的特性（作用）

如何触发BFC

larry0442 commented Apr 7, 2020

下列方式会创建块格式化上下文：

bfc: 块级格式化上下文

使用可以解决

blueRoach commented May 21, 2020 • edited Loading

giggleCYT commented Jun 1, 2020

allenGKC commented Aug 28, 2020

smile-2008 commented Sep 1, 2020

amikly commented Oct 25, 2021

作用

形成条件

www-wanglong commented Jun 18, 2022

形成的条件

BFC的应用

WangXi01 commented Jul 12, 2022

Iambecauseyouare commented Feb 14, 2023

lili-0923 commented Feb 2, 2024

[css] 第7天简述你对BFC规范的理解 #20

[css] 第7天简述你对BFC规范的理解 #20

DarthVaderrr commented Jul 3, 2019 •

edited

Loading

zxl-lxz commented Mar 24, 2020 •

edited

Loading

blueRoach commented May 21, 2020 •

edited

Loading