fe-interview icon indicating copy to clipboard operation
fe-interview copied to clipboard

Published 20 hours ago • verified publisher icon haizlin

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

Open haizhilin2013 opened this issue 5 years ago • 19 comments

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

haizhilin2013 avatar Apr 22 '19 20:04 haizhilin2013

  • 是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 avatar Apr 23 '19 15:04 yxkhaha 

<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 avatar Jul 03 '19 08:07 DarthVaderrr

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 avatar Jul 24 '19 03:07 Konata9

  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 avatar Sep 19 '19 09:09 Daniel-Fang

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

censek avatar Oct 08 '19 02:10 censek

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

nikolausliu avatar Nov 28 '19 07:11 nikolausliu

  • 是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 avatar Dec 18 '19 15:12 crazyming9528

  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 avatar Dec 18 '19 15:12 crazyming9528

什么是BFC

块级格式化上下文

BFC的特性（作用）

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

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

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

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

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

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

如何触发BFC

  1. HTML本身就是BFC
  2. 浮动元素
  3. 绝对定位元素（absolute/fixed）
  4. overflow取值不为visible
  5. display:
  • flex
  • inlineblock
  • grid
  • flow-root
  • table等等

zxl-lxz avatar Mar 24 '20 02:03 zxl-lxz

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

  • 根元素()
  • 浮动元素（元素的 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 avatar Apr 07 '20 03:04 larry0442

  • 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 avatar May 21 '20 08:05 blueRoach

块格式化上下文（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 avatar Jun 01 '20 07:06 giggleCYT

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

allenGKC avatar Aug 28 '20 05:08 allenGKC

什么是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 avatar Sep 01 '20 01:09 MrZ2019

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

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

作用

  1. 使BFC内部浮动元素不会到处乱跑，BFC就是页面上的一个隔离的独立容器
  2. 和浮动元素产生边界，BFC的区域不会float的元素区域重叠
  3. 使子元素不会导致父元素的高度塌陷，计算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，即使该元素没有包裹在一个多列容器中

amikly avatar Oct 25 '21 11:10 amikly

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

形成的条件

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

BFC的应用

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

www-wanglong avatar Jun 18 '22 09:06 www-wanglong

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

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

WangXi01 avatar Jul 12 '22 09:07 WangXi01

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

Iambecauseyouare avatar Feb 14 '23 02:02 Iambecauseyouare

一、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 四周的情况
  • 解决边距重叠问题 （父子，兄弟，空元素等）

lili-0923 avatar Feb 02 '24 06:02 lili-0923