Fe-interview: [css] 第7天 简述你对BFC规范的理解

Created on 22 Apr 2019  ·  14Comments  ·  Source: haizlin/fe-interview

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

picture haizhilin2013

Most helpful comment

  • 是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就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
picture yxkhaha on 23 Apr 2019
👍21 👎2

All 14 comments

  • 是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就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
yxkhaha picture yxkhaha on 23 Apr 2019
👍21 👎2 
<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元素，所以内部盒子会完全居中显示

DarthVaderrr picture DarthVaderrr on 3 Jul 2019
👎6 😄1

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 世界》

Konata9 picture Konata9 on 24 Jul 2019
👍4
  1. 特性

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

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

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

  2. 形成条件

    • html 根元素

    • float的值不是none

    • position 的值不是static或者relative

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

    • overflow的值不是visible

  3. 应用场景

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

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

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

Daniel-Fang picture Daniel-Fang on 19 Sep 2019
👍2

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

censek picture censek on 8 Oct 2019
👍3
  1. MDN 的解释
  2. 浮动、清除浮动只影响同一 BFC 内的元素。外边距折叠也只会发生在同一 BFC 内的元素之间。
  3. mdn 列举了很多可以形成 bfc 的条件，我只记两个：overflow:auto和display:flow-root。display:flow-root可以无副作用的创建一个 BFC，其它的条件有它本来的职责可能会产生副作用。
nikolausliu picture nikolausliu on 28 Nov 2019
😄1
  • 是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 picture crazyming9528 on 18 Dec 2019

  1. 特性

    • 计算BFC的高度时，浮动子元素也参与计算
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
    • BFC的区域不会与float的元素区域重叠

  2. 形成条件

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

  3. 应用场景

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

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

crazyming9528 picture crazyming9528 on 18 Dec 2019

什么是BFC

块级格式化上下文

BFC的特性（作用）

  1. 同属于一个BFC的两个块级盒子，在垂直方向上会发生margin重叠。
    > 给其中一个盒子放入另外一个BFC中，解决margin重叠
  2. 浮动元素是一个单独的BFC。两个BFC之间不会影响。
    > 解决浮动元素浮在其它元素表面上的问题。一般用于图文环绕。

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

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

    如何触发BFC

  4. HTML本身就是BFC

  5. 浮动元素
  6. 绝对定位元素（absolute/fixed）
  7. overflow取值不为visible
  8. display:
  9. flex
  10. inlineblock
  11. grid
  12. flow-root
  13. table等等
1282772905 picture 1282772905 on 24 Mar 2020

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

  • 根元素()
  • 浮动元素（元素的 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 重叠
  • 高度塌陷
  • 与浮动有关的布局问题（忘记了）
larry0442 picture larry0442 on 7 Apr 2020
  • 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），也应始终创建新的格式设置上下文。
blueRoach picture blueRoach on 21 May 2020

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

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

创建BFC
（1）根元素或包含根元素的元素
（2）浮动元素float＝left|right或inherit（≠none）
（3）绝对定位元素position＝absolute或fixed
（4）display＝inline-block|flex|inline-flex|table-cell或table-caption
（5）overflow＝hidden|auto或scroll(≠visible)

giggleCYT picture giggleCYT on 1 Jun 2020

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

allenGKC picture allenGKC on 28 Aug 2020

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

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

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

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

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

MrZ2019 picture MrZ2019 on 1 Sep 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

haizhilin2013 picture haizhilin2013  ·  3Comments
undefinedYu picture undefinedYu  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments