什么是BFC？BFC的规则是什么？如何创建BFC？

Open YvetteLau opened this issue 5 years ago • 43 comments

May 28 '19 16:05 YvetteLau

概念(BFC)

"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

规则(BFC)

内部的Box会在垂直方向，一个接一个地放置 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算

产生(BFC)

float的值不为none。 overflow的值不为visible。(这个是最推荐开启bfc的,副作用最小) position的值不为relative和static。 display的值为table-cell, table-caption, inline-block中的任何一个。使用场景(BFC)

自适应两栏布局清除内部浮动防止margin重叠

May 29 '19 01:05 shenanheng

BFC:块级格式化上线文，Block fromatting context 的缩写，BFC是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域的外部毫无关系。 1，如何创建BFC 不是所有的元素模式都能产生BFC，w3c规定只有display为block,list-item,table的元素会产生BFC。让元素产生BFC的触发条件有：1，float属性不为none;2,position属性为absolute或者fixed;3,display为inline-block,table-cell,table-caption,flex,inline-flex,overflow不为visible,最常用的是overflow:hidden。 2，BFC的用途：1，清除浮动；2，解决外边距合并的问题；3，制作右侧盒子自适应。 3，BFC的原理 1，在BFC内部盒子垂直的从顶部一个一个的排序； 2，盒子垂直方向的距离由margin决定，属于同一个BFC的两个盒子的margin会发生重叠； 3，在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘； 4，BFC的区域不会与浮动的盒子产生交集，而是紧贴浮动边缘； 5，计算BFC的高度时，自然也会检测浮动盒子的高度，它是一个独立的渲染区域。

May 29 '19 01:05 chang229

一、什么是BFC？

BFC全称为block formatting context，中文为“块级格式化上下文”。相对应的还有IFC，也就是inline formatting context，中文为“内联格式化上下”。如果一个元素具有 BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。所以，BFC 元素是不可能发生 margin 重叠的，因为 margin 重叠是会影响外面的元素的;BFC 元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位，这显然有违 BFC 元素的子元素不会影响外部元素的设定。

二、BFC的原理是什么？

上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。根元素 float的值不为none overflow的值不为visible display的值为inline-block、table-cell、table-caption display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC position的值为absolute或fixed

三、如何创建BFC？

• 根元素; • float 的值不为 none; • overflow 的值为 auto、scroll 或 hidden; • display 的值为 table-cell、table-caption 和 inline-block 中的任何一个; • position 的值不为 relative 和 static。换言之，只要元素符合上面任意一个条件，就无须使用 clear:both 属性去清除浮动的影响了。不要见到一个

元素就加个类似.clearfix 的类名，否则只能暴露你孱弱的 CSS 基本功。 BFC 的结界特性最重要的用途其实不是去 margin 重叠或者是清除 float 影响，而是实现更健壮、更智能的自适应布局。

May 29 '19 01:05 luohong123

了解BFC

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

如何创建BFC

根元素或包含根元素的元素
浮动元素（元素的 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或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

BFC的应用 这里举一个例子，浮动布局在排版布局中不可缺少，当元素内部的子元素浮动之后，该元素就会形成“高度塌陷”，即该元素的高度不能够根据子元素的高度进行自行判断，需要清除浮动或者手动设置高度才能够解决。如果使用了BFC，只需要给该元素添加一个如overflow:hidden;的CSS样式，即可解决“父元素高度塌陷”的问题、

May 29 '19 02:05 woyiweita

对于这个名词真是熟悉得不能在熟悉了，可是自己理解得还是有写浅薄

写在前面

Box: CSS布局的基本单位

Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子： block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

Formatting context：块级上下文格式化

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

CSS2.1 中只有 BFC 和 IFC,CSS3中还增加了 GFC 和 FFC。

简单总结box是css布局最基本的单位，box渲染的方式有block-level和inline-level，CSS3中还有GFC和IFC

BFC是什么

它是一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离

BFC触发条件

根元素
position: fixed/absolute
float 不为none
overflow不为visible

BFC的规则

内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算

应用

阻止margin重叠
清除内部浮动
自适应两栏布局

其实这些应用我们在实际工作都用到了，只不理解WHY

阻止margin重叠

根据BFC的规则Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

在其中一个div外面包裹一层，并且设置一个BFC。他们之前都是同一根元素下面，现在让其中一个div脱离出来

before

    <style>
        div.box {
            color: #f55;
            background: #fcc;
            width: 200px;
            line-height: 100px;
            text-align: center;
            margin: 100px;
        }
    </style>
<body>
    <div class="box">南蓝</div>
    <div class="box">nanlan</div>

</body>

同一BFC的两个box发生margin重叠.png

after

<style>
        div.box {
            color: #f55;
            background: #fcc;
            width: 200px;
            line-height: 100px;
            text-align: center;
            margin: 100px;
        }
        .wrap {
            overflow: hidden; // 形成一个BFC
        }
    </style>

<body>

    <div class="wrap">
        <div class="box">南蓝</div>
    </div>
    <div class="box">nanlan</div>
    
</body>

阻止了margin重叠.png 2. 清除内部浮动 根据BFC的规则计算BFC的高度时，浮动元素也参与计算

before 解决办法将parent设置overflow:hidden,产生一个BFC，既可以让浮动元素参与高度计算
after 代码超级简单就不贴了

自适应两栏布局 根据BFC的规则每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此。

  <style>
        .left {
            height: 100px;
            width: 100px;
            background-color: blueviolet;
            float: left;
            border: 10px solid pink;
        }
        .right {
            height: 200px;
            background-color: brown;
        }
    </style>
<body>
    <div class="left">南蓝</div>
    <div class="right">nanlan</div>
</body>

解决办法就是为右边的部分重新设置一个BFC,代码如下

    <style>
        .left {
            height: 100px;
            width: 100px;
            background-color: blueviolet;
            float: left;
            border: 10px solid pink;
        }

        .right {
            height: 200px;
            background-color: brown;
           overflow: hidden;
        }
    </style>
<body>
    <div class="left">南蓝</div>
     <div class="right">nanlan</div>
</body>

以上都是BFC规则BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此 总算是对BFC有清晰地理解了

May 29 '19 02:05 MissNanLan

BFC

BFC块级格式化上下文, 一旦形成一个块级格式化上下文，这个上下文中的元素的布局不会影响外部元素的布局

如何触发块级格式化上下文（常见）

根元素本身就会形成一个块级格式化上下文
overflow不为visible的
float不为none
inline-block 行内块元素
定位元素（position是absolute或者fixed）
flex和grid布局
diplay和table相关的，比如table, table-cell等

BFC 的应用场景

1. 经典的两栏布局

<div class="div1"></div>
<div class="div2"></div>

.div1 {
  float: left;
  width: 300px;
  background-color: pink;
  height: calc(100vh - 100px); // 为了展示效果
}

.div2 {
  background-color: black;
  height: 100vh;
  overflow: hidden;
}

解释: 如果不触发div2的BFC, 那么div2会当做浮动元素不存在, 就会出现div1浮动在div2上，在布局中这并不是想要的。在div2上添加overflow:hidden触发BFC, 它就不会和另一个BFC重叠而是各自展示各自的，互不影响

2. 浮动闭合 当给一个元素设置float让其浮动之后它的父元素会塌陷，意思就是父元素无法包裹住这个浮动的子元素。解决这个问题的办法之一就是在父元素上触发BFC, 因为一旦在父元素上触发BFC它内部的所有子元素都不会受到其他元素的影响，为了保证这一点父元素必须包裹住内部所有的子元素，包括浮动的元素

3.外边距合并问题 在同一个BFC中块元素的上下外边距会发生合并，取两者最大的外边距。如果不希望这个合并产生，那么也可以让两个元素分别处于各自的BFC中，因为互不影响，所以不会发生合并

May 29 '19 03:05 AILINGANGEL

1.什么是BFC？ BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干

2.BFC的原理是什么？ BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

3.如何创建BFC？ 1.float的值不能为none 2.overflow的值不能为visible 3.display的值为table-cell, table-caption, inline-block中的任何一个 4.position的值不为relative和static

参考掘金 : https://juejin.im/post/5b724d5051882561131aaa52

May 29 '19 04:05 Cain-kz

BFC，Block Format Context，块格式化上下文，是页面上一个样式独立不干扰外界也不受外界干扰的盒子。 Formatting context(格式化上下文) 则是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC 便是种定义了对应规则的盒子。

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

根元素或包含根元素的元素
浮动元素（元素的 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或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

May 29 '19 04:05 lqzo

什么是BFC？BFC的原理是什么？如何创建BFC？

盒模型

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

CSS盒模型描述了通过 文档树中的元素 以及相应的 视觉格式化模型(visual formatting model) 所生成的矩形盒子。

基础盒模型(CSS basic box model)

当浏览器对一个 render tree 进行渲染时，浏览器的渲染引擎就会根据 基础盒模型(CSS basic box model) ，将所有元素划分为一个个矩形的盒子，这些盒子的外观，属性由CSS来决定。

我们在浏览器控制台输入如下代码就可以看到页面的每一个元素都是由一个矩形来包裹的，这些就是盒子。

$$('*').forEach(e => {
  e.style.border = '1px solid';
})

图示如下：

视觉格式化模型(visual formatting model)

CSS 的视觉格式化模型(visual formatting model) 是根据 基础盒模型(CSS basic box model) 将 文档(doucment) 中的元素转换一个个盒子的实际算法。

官方说法就是： 它规定了用户端在媒介中如何处理文档树( document tree )。

每个盒子的布局由以下因素决定：

盒子的尺寸
盒子的类型：行内盒子 (inline)、行内级盒子 (inline-level)、原子行内级盒子 (atomic inline-level)、块级盒子 (block-level)
定位：正常流、浮动、绝对定位
文档树中当前盒子的子元素 或 兄弟元素
视口(viewport) 的尺寸和位置
盒子内部图片的尺寸
其他某些外部因素

视觉格式化模型(visual formatting model) 的计算，都取决于一个矩形的边界，这个矩形，被称作是 包含块( containing block ) 。一般来说，(元素)生成的框会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。

例子如下：

<div>
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>

以上代码为例，div 和 table 都是包含块。div 是 table 的包含块，同时 table 又是 td 的包含块，不是绝对的。

图示：(图片来自w3help)：

盒子的生成

盒子的生成是 CSS视觉格式化模型 的一部分，用于从文档元素生成盒子。盒子的类型取决于CSS display 属性。

格式化上下文(formatting context) 是定义 盒子环境 的规则，不同 格式化上下文(formatting context) 下的盒子有不同的表现。

以下是盒子相关的概念定义：

块级元素
- 当元素的display 为 block、list-item 或 table 时，它就是块级元素。
块级盒子
- 块级盒子用于描述它与父、兄弟元素之间的关系。
- 每个块级盒子都会参与 块格式化上下文（block formatting context） 的创建。
- 每个块级元素都会至少生成一个块级盒子，即主块级盒子（principal block-level box）
- 主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与定位方案。
- 一个同时是块容器盒子的块级盒子称为块盒子（block box）。
匿名盒子
- 某些情况下需要进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能被CSS 选择器选中，也就是所有可继承的 CSS 属性值都为 inherit ，而所有不可继承的 CSS 属性值都为 initial。因此称为匿名盒子(anonymous boxes)。
行内元素
- 当元素的display 为 inline、inline-block 或 inline-table 时，它就是行内级元素。
- 显示时可以与其他行内级内容一起显示为多行。
行内盒子
- 行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（inline formatting context）的创建。
匿名行内盒子
- 类似于块盒子，CSS引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值 initial。
行盒子
- 行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。
run-in 盒子（在CSS 2.1的标准中移除了）
- run-in盒子可以通过display: run-in来设置，它既可以是块盒子，又可以是行内盒子，这取决于它后面的盒子的类型。

BFC(Block formatting contexts)

BFC 这个概念来自于 视觉格式化模型(visual formatting model) 中的 正常流(Normal flow)。

定义

浮动、绝对定位元素、块容器（例如inline-blocks、table-cells、and table-captions）以及溢出而非可视的元素（除非该值已经传播到了视口）都是建立 BFC(Block formatting contexts) 的条件。

表现

在BFC(Block formatting contexts)中，在包含块内一个盒子一个盒子不重叠地垂直排列，两个兄弟盒子直接的垂直距离由margin决定。浮动也是如此（虽然有可能两个盒子的距离会因为floats而变小），除非该盒子再创建一个新的BFC。

鱼头注：简单来说，BFC就是一个独立不干扰外界也不受外界干扰的盒子啊(/ω＼)。

块级相关的计算

正常流中的块级与非替换元素

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块的宽度

上面的计算法则是基于 **writing-mode: ltr**而言，如果是别的书写顺序，则按照该顺序来计算。

如果宽度不是 auto 或者 'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width' 的结果大于包含块的宽度，对于以下规则，被视为零。

如果只有一个值指定为'auto'，则其使用的值来自相等。

如果宽度设置为 auto ，则任何其他 auto 值变为 0 ，并且宽度会跟着所以盒子的情况铺满。

如果 'margin-left' 跟 **'margin-right'**都为 auto ，则会使元素相对于包含块的边缘水平居中。

浮动与非替换元素

如果 'margin-left' 跟 **'margin-right'**都为 auto ，则它们的具体值为 0 。

如果宽度为 auto，则使用 shrink-to-fit 的宽度计算方式（CSS 2.2没有定义精确的算法）。

然后 shrink-to-fit 大概的计算方式则是：min(max(preferred minimum width, available width), preferred width)。

绝对定位与非替换元素

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = 包含块的宽度

如果 'left'，'width' 和 'right' 都是 'auto'，则首先将 'margin-left' 和 'margin-right' 的 'auto' 值设置为 0。

如果 'left'，'width' 和 'right' 都不是 'auto'，则按照实际值来算。

如果 'margin-left' 跟 'margin-right' 都为 0 ，则根据 'left' ，'width' 和 'right' 的值是否是 'auto' 来计算。如果 一个方向值 ，'width' 的值是 'auto'，而 '另一个一个方向值' 不是，则宽度使用 shrink-to-fit 算法计算。如果一个值为**'auto'**而另外两个值不算，则该值使用 shrink-to-fit 来计算。

上面的计算法则是基于 writing-mode: ltr 而言，如果是别的书写顺序，则按照该顺序来计算。

鱼头注：这里特别说明一点，在MDN中依然把flexbox跟gridbox 算在 BFC中，但在最新的规范里，它们已经从BFC中分离了出去，成为独立的一个CSS模块，内容如下：

May 29 '19 05:05 KRISACHAN

1，什么是BFC？

  1）BFC(Block formatting context)直译为“块级格式化上下文”。BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。
  2）可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流
  3）不是所有的元素，模式都能产生BFC 。w3c规范：display属性为block, list-item ,table的元素，会产生BFC。

2，BFC的原理是什么？

  1）内部的Box会在垂直方向，一个接一个地放置。
  2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  4）BFC的区域不会与float box重叠。
  5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  6）计算BFC的高度时，浮动元素也参与计算

3，如何创建BFC?

 1）根元素
 2）float属性不为none
 3）position不为static和relative
 4）overflow不为visible
 5）display为inline-block, table-cell, table-caption, flex, inline-flex

4,BFC作用？

1）防止外边距重叠。
 bfc导致的属于同一个bfc中的子元素的margin重叠(Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)
我们可以在div外面包裹一层容器，并触发该容器生成一个BFC。那么两个div便不属于同一个BFC，就不会发生margin重叠了。
2）清除浮动的影响
 块级子元素浮动，如果块级父元素没有设置高度，其会有高度塌陷的情况发生。
 原因：子元素浮动后，均开启了BFC，父元素不会被子元素撑开。
 解决方法：由第六条原理得，计算BFC的高度时，浮动元素也参与计算。所以只要将父容器设置为bfc 
                 就可以把子元素包含进去：这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的 
                 子元素，在这个BFC，这些元素将会回到页面的常规文档流。
3）防止文字环绕

May 29 '19 06:05 xdandsl

### 什么是BFC？ BFC 官方说法是块级格式化上下文，按照我的理解，就是一个块容器，决定位于这个容器里的块盒子的布局及浮动相互影响范围的一个区域，使处于BFC内部的元素与外部的元素相互隔离，内外元素的定位不会相互影响。

### BFC的原理是什么？

BFC元素是独立容器，内外不影响 2.BFC的区域不与浮动元素box重叠 3.BFC垂直方向上边距会发生重叠 4.计算BFC的高度，浮动元素也会参与计算

### 如何创建BFC？ 满足下面任一条件即可 1.float值不为none 2.position值不是static或relative 3.display设置为table相关或inline-block 4.overflow值为hidden或auto

May 29 '19 06:05 yeyeyess

1. 什么是BFC? BFC-Block Formmatting Context，块格式化上下文，是web页面可视化css渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素跟其他元素的交互限定区域。当涉及到可视化布局的时候，BFC提供了一个环境，在HTML元素在这个环境中按照一定规则进行布局，一个环境中的元素不会影响到其他环境中的布局。比如，可以将一个页面想象为一个大的集装箱，这个集装箱里的货物就是HTML元素，在现实生活中为了避免不同人的货物混淆，而分别打好包装，装入不同的集装箱，这样无论你的货物怎样摆放，都不会影响到其他的集装箱，你可以将包装视为BFC；简单说，BFC是一种属性，这种属性会影响着元素的定位，以及与其兄弟元素之间的相互作用。 2.BFC的原理是什么？ PS:Box是css布局的对象和基本单位，直观的说，一个页面是由多个Box组成的； (1)BFC就是页面上一个独立的容器，容器中的元素不会影响外界的元素； (2)Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的Box的外边距margin会重叠； (3)计算BFC的高度时，浮动元素也参与计算； (4)内部的Box会在垂直方向，一个接一个的放置； (5)每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此； (6)BFC的区域不会与float box重叠； 3.如何创建BFC? (1)body根元素 (2)float属性不为none; (3)position为absolute或fixed (4)display为 inline-block,table-cell, table-caption, flex, inline-flex; (5)overflow不为visible;

May 29 '19 07:05 yaxinlove

1.什么是BFC？ BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗来说BFC里面的布局与外面的布局没有一点点的关系，独立的！！ 2.BFC的原理是什么？ body根元素浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells、flex overflow 除了 visible 以外的值 (hidden、auto、scroll) 子元素的边距会重叠,打比方margin : 10px 0 ;那么BFC的边距只会是10px，不会是20px。这就说诉的边距重叠。 BFC 可以包含浮动的元素（清除浮动）,因为加了overflow:hidden ,因为overflow:hidden本来就是清楚浮动的一种方法。 BFC 可以阻止元素被浮动元素覆盖

May 29 '19 07:05 tianyuandsb

什么是BFC：

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

触发条件：

根元素
position:absolute/fixed
display:table/flex/inline-block
float
overflow != visible

规则：

属于同一个bfc的元素上下依次排列
属于同一个bfc的元素margin重叠
BFC 中子元素的 margin box 的左边，与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动子元素也参与计算
文字层不会被浮动层覆盖，环绕于周围

应用：

阻止margin重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
自适应两栏布局
可以阻止元素被浮动元素覆盖

May 29 '19 07:05 Jinminrui

BFC= Block fomatting context = block-level box + Formatting Context 块级格式化内容，我理解的就是块级标签的作用域。

形成BFC的条件： 1.body根元素. 2.float：left /rigth. 3.定位元素： position:absolute/fixed. 4.display：inline-block/table-cells/flex. 5.overflow:hidden/auto/scroll (会形成一个局部块状内容区域，不受其他布局影响)

May 29 '19 07:05 haxisi001

(1)什么是BFC:块格式化上下文（Block Formatting Context）是一个独立的渲染区域，简单来说就是一个独立的盒子，并且这个盒子里的布局不受外部影响，也不会影响到外部元素。 (2)BFC规则: ①BFC内部的盒子Box会在垂直方向，一个接一个地放置。 ②Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的垂直margin会发生重叠。 ③每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 ④BFC的区域不会与浮动盒子float box重叠。 ⑤BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 ⑥计算BFC的高度时，浮动元素也参与计算 (3)触发BFC： ①根元素（html就是根元素，整个html就是一个独立的BFC） ②float属性不为none（如：left | right） ③overflow的值不为visible（如：hidden | auto | scroll） ④display属性值为inline-block | flex | inline-flex | table-cell | table-caption ⑤position为absolute或fixed (4)应用BFC:解决高度塌陷问题

May 29 '19 08:05 dashengzi66

什么是BFC

w3c对BFC的定义是浮动元素和绝对定位元素，非块级盒子的块级容器，以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC

先决条件

1、float的值不是none。 2、position的值不是static或者relative。 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4、overflow的值不是visible

创建BFC

只要满足上面的条件就可以例子就不写了

实际应该

利用BFC避免外边距折叠解决容器高度不会被撑开的问题

May 29 '19 09:05 zhangxianhui

Deploy Preview for nostalgic-ptolemy-b01ab8 ready!

Name	Link
Latest commit	ba6fb3b0add1c7267a0d1580f103e2b70ee6b068
Latest deploy log	https://app.netlify.com/sites/nostalgic-ptolemy-b01ab8/deploys/642b24206be471000807d196
Deploy Preview	https://deploy-preview-5403--nostalgic-ptolemy-b01ab8.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

May 29 '19 09:05 jodiezhang

BFC：块级格式上下文，Block Formatting Contexts 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 生成BFC的一些元素：根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible 如何创建BFC：(MDN) 根元素或包含根元素的元素浮动元素（元素的 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或 strict 的元素弹性元素（display为 flex 或 inline-flex元素的直接子元素）网格元素（display为 grid 或 inline-grid 元素的直接子元素）多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1） column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。 作用： 块格式化上下文包含创建它的元素内部的所有内容. 块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。即：使 BFC 内部浮动元素不会到处乱跑；和浮动元素产生边界。

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

May 29 '19 12:05 darlingyz

3.1 什么是 BFC？

BFC 即 Block formatting context，译为块级格式化上下文。简单来说，它是一种属性，这种属性影响着元素的定位以及与其兄弟元素之间的相互作用。因为是属性，所以我们通常说“元素具有 BFC”、“元素触发了 BFC”，而不说“元素是 BFC”。

从样式上看，具有 BFC 的元素与普通的容器没有什么区别；但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的子元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性。

3.2 如何触发 BFC？

CSS 规定满足下列 CSS 声明之一的元素便会生成 BFC：

根元素或其它包含它的元素；
float 的值不为 none；
overflow 的值不为 visible；
position 的值为 absolute 或 fixed；
display 的值为 inline-block、table-cell、table-caption、table、flex、inline-flex、flow-root

table 本身不生成 BFC，而是 table 默认生成的匿名 table-cell 会生成 BFC

3.3 BFC 的特性

从整体上看，BFC 是隔离了的容器，这个具体可以表现为三个特性：

3.3.1 BFC 会阻止 margin 塌陷

前面我们说过 BFC 可以用于解决 margin 塌陷问题。

因为相邻兄弟元素默认位于同一个 BFC 是导致 margin 塌陷的原因，所以我们只需要设法隔离它们两者即可 ———— 假设有兄弟元素 A 和 B，可以使 A 的父元素触发 BFC，此时，触发了 BFC 的父元素里面的 A 子元素不会在布局上影响到 B，也自然不会有 margin 的叠加。
同样地，如果是父子嵌套的 margin 塌陷问题，只需要触发父元素的 BFC 即可。

3.3.2 BFC 可以包含浮动的元素

前面说过，父元素没有设置高度时，子元素的浮动会导致父元素表现为 0 高度，也就是说正常情况下父元素无法包含浮动的子元素。如图：

.Fa{
    border: 2px solid red;
    width: 300px;
}
.son{
    width:180px;
    height:180px;
    background-color:yellow;
    float:left;
}

但是触发了父元素的 BFC 后，父元素将可以包含浮动的子元素。如图：

.Fa{
    border: 2px solid red;
    width: 300px;
    overflow:hidden;  /* 随便一个 BFC 的触发条件 */
}
.son{
    width:180px;
    height:180px;
    background-color:yellow;
    float:left;
}

3.3.3 BFC 可以阻止元素被浮动元素覆盖

前面说过浮动元素会影响兄弟元素的位置，具体地说就是浮动之后脱离了文档流，使得兄弟元素上移填补空缺，而这会使得它被浮动元素覆盖。如图：

但是触发了兄弟元素的 BFC 后，兄元素将不会被浮动的元素覆盖 ———— 不会被覆盖，意味着兄弟元素出现在浮动元素的旁边或者下面，具体取决于父元素的宽度。如果父元素的宽度足以包含这两个子元素的宽度之和，则子兄弟元素和子浮动元素并排。如图：

如果父元素的宽度不足以包含这两个子元素的宽度之和，则子兄弟元素会出现在子浮动元素的下面。如图：

May 29 '19 12:05 Chorer

什么是BFC？

BFC即“块级格式化上下文"，它能够形成一个隔离的独立容器，而且子容器布局不受外部容器影响。

如何创建BFC

1.float值不为none 2.position值不是static或relative 3.display设置为table相关或inline-block 4.overflow值为hidden或auto

BFC作用

1、形成一个独立的容器，子容器布局不受外部容器影响。 2、防止margin重叠。

May 29 '19 12:05 riluocanyang

BFC是块级格式化上下文，不与其他块重合，浮动，定位，overflow能够形成块级格式化上下。

May 29 '19 13:05 muyiweibo

BFC

块级格式化上下文，其中W3C 对其的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

从另一个角度来理解的话，BFC 是一个独立的布局环境，其中的元素布局是不受外界影响的。且其中的块盒和行盒（内联元素组成），都会沿着父元素的边框垂直排列

BFC满足以下条件的一个或者多个

position 为absolute
float 不为none
display 为inline-block, inline-flex, flex等
overflow 不为visible

BFC的创建

只要满足上述的几个条件即可创建成功

BFC的好处

利用BFC可以避免外边距折叠
BFC 可以包含浮动，可以避免使用:after :before 来使父节点撑开
避免文字环绕

May 29 '19 14:05 yelin1994

what（什么是BFC）

参考MDN，BFC（块格式化上下文）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程中发生的区域，而且存在浮动元素与其他元素交互的区域。我看完的感觉是哦，但是还没怎么懂，之前也是只知道能怎么用。那么我就继续去看了相关的术语文档。所以我理解下来就是一个包含子元素的块级元素，在这个区域里面布局，或者浮动作用于子元素上，这样的情况就是BFC。

术语普及

块盒子：block box，如果一个块级盒子同时也是一个块容器盒子（见下），则称其为块盒子。除具名块盒子之外，还有一类块盒子是匿名的，称为匿名块盒子（Anonymous block box），匿名盒子无法被CSS选择符选中。块级元素：block-level element，元素的 display 为 block、list-item、table 时，该元素将成为块级元素。元素是否是块级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。块容器盒子：block container box或block containing box，块容器盒子侧重于当前盒子作为“容器”的这一角色，它不参与当前块的布局和定位，它所描述的仅仅是当前盒子与其后代之间的关系。换句话说，块容器盒子主要用于确定其子元素的定位、布局等。

why（为什么要用BFC）

因为在写css的过程中，我们会遇到这样的情况：

父元素和子元素的外边距合并
子元素在使用浮动的时候，父元素出现高度塌陷
同级元素被同级浮动元素覆盖为了解决这些问题，我们需要触发BFC

how（怎么做）

继续往下说，怎么解决上面的问题

父元素和子元素的外边距合并： overflow: hidden;
子元素在使用浮动的时候，父元素出现高度塌陷： overflow: hidden;
同级元素被同级浮动元素覆盖：overflow: hidden;

当然，这只是上面三个问题的解决方案。 MDN上介绍触发BFC的方式如下：

根元素或包含根元素的元素
浮动元素（元素的 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或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

May 29 '19 14:05 ZadaWu

BFC的全称叫做块级格式化上下文，拥有BFC属性的元素是一个独立的空间，内部的布局不会影响外部，外部的布局也不会影响内部。BFC元素在计算高度的时候浮动元素也会参与计算，在页面中是一个独立的容器，BFC区域不会与浮动元素重合。BFC可以用来解决margin塌陷和清除浮动。创建BFC：

float不为none
position不为static和relative
overflow：hidden
display为inline-block、table-cells等

May 29 '19 14:05 CCZX

什么是BFC？如何创建BFC？

什么是BFC？

BFC ，Block formatting context，即是块级格式化上下文。可以把它理解成是一个独立的容器，并且这个容器的里的布局，与容器外的布局毫不相干。

如何创建BFC？

float不为none
position不为static和relative
overflow：hidden
display为inline-block、table-cells等

May 29 '19 14:05 plane-hjh

1.什么是BFC? BFC（Block Formatting Context）直译为“块级格式化范围”。在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。任何被渲染的元素都属于一个 box ，并且不是 block ，就是 inline 。即使是未被任何元素包裹的文本，根据不同的情况，也会属于匿名的 block boxes 或者 inline boxes。所以上面的描述，即是把所有的元素划分到对应的 formatting context 里。 2.BFC的原理暂时不清楚。 3.如何创建BFC （1）根元素（2）float的值不为none （3）overflow的值为auto、scroll或hidden （4）display的值为table-cell、table-caption或inline-block （5）position的值为fixed或absolute

（微信名：RUN）

May 29 '19 14:05 MissWXiang

什么是BFC？

BFC（Block Formatting Context）直译为块格式化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其它元素的关系和相互作用。

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

BFC的原理是什么？

原理不清。

如何创建BFC？

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

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

主要应用：清除浮动；实现两列自适应布局。

May 29 '19 15:05 huangsiyuan2015

BFC的定义

BFC全称block formatting context，中文为”格式块级化上下文“。一个元素开启了BFC，其里面的子元素不会影响到外面的元素，所以BFC元素不会发生margin重叠。

如何创建BFC

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

May 29 '19 15:05 ivan0525

BFC 是 Block Formatting Context 的缩写，即块格式化上下文。我们来看一下CSS2.1规范中对 BFC 的说明。

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

浮动、绝对定位的元素、非块级盒子的块容器（如inline-blocks、table-cells 和 table-captions），以及overflow的值不为visible（该值已传播到视区时除外）为其内容建立新的块格式上下文。

因此，如果想要深入的理解BFC，我们需要了解以下两个概念：

1.Box

2.Formatting Context

Box

Box 是 CSS 布局的对象和基本单位，页面是由若干个Box组成的。

元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box 会参与不同的 Formatting Context。

Formatting Context

Formatting Context 是页面的一块渲染区域，并且有一套渲染规则，决定了其子元素将如何定位，以及和其它元素的关系和相互作用。

Formatting Context 有 BFC (Block formatting context)，IFC (Inline formatting context)，FFC (Flex formatting context) 和 GFC (Grid formatting context)。

BFC布局规则

BFC内，盒子依次垂直排列。
BFC内，两个盒子的垂直距离由 margin 属性决定。属于同一个BFC的两个相邻Box的margin会发生重叠【符合合并原则的margin合并后是使用大的margin】
BFC内，每个盒子的左外边缘接触内部盒子的左边缘（对于从右到左的格式，右边缘接触）。即使在存在浮动的情况下也是如此。除非创建新的BFC。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

如何创建BFC

根元素
浮动元素（float 属性不为 none）
position 为 absolute 或 relative
overflow 不为 visible 的块元素
display 为 inline-block, table-cell, table-caption

BFC的应用

1.防止 margin 重叠

<style>
    .a{
        height: 100px;
        width: 100px;
        margin: 50px;
        background: pink;
    }
</style>
<body>
    <div class="a"></div>
    <div class="a"></div>
</body>

两个div直接的 margin 是50px，发生了 margin 的重叠。

根据BFC规则，同一个BFC内的两个两个相邻Box的 margin 会发生重叠，因此我们可以在div外面再嵌套一层容器，并且触发该容器生成一个 BFC，这样 <div class="a"></div> 就会属于两个 BFC，自然也就不会再发生 margin 重叠

<style>
    .a{
        height: 100px;
        width: 100px;
        margin: 50px;
        background: pink;
    }
    .container{
        overflow: auto;; /*触发生成BFC*/
    }
</style>
<body>
    <div class="container">
        <div class="a"></div>
    </div>    
    <div class="a"></div>
</body>

2.清除内部浮动(CSS中经常遇到的问题之一)

<style>
    .a{
        height: 100px;
        width: 100px;
        margin: 10px;
        background: pink;
        float: left;
    }
    .container{
        width: 120px;
        border: 2px solid black;
    }
</style>
<body>
    <div class="container">
        <div class="a"></div>
    </div>
</body>

container 的高度没有被撑开，如果我们希望 container 的高度能够包含浮动元素，那么可以创建一个新的 BFC，因为根据 BFC 的规则，计算 BFC 的高度时，浮动元素也参与计算。

<style>
    .a{
        height: 100px;
        width: 100px;
        margin: 10px;
        background: pink;
        float: left;
    }
    .container{
        width: 120px;
        display: inline-block;
        border: 2px solid black; /*触发生成BFC*/
    }
</style>

3.自适应两栏布局

<style>
    body{
        width: 500px;
    }
    .a{
        height: 150px;
        width: 100px;
        background: pink;
        float: left;
    }
    .b{
        height: 200px;
        background: blue;
    }
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

根据规则，BFC的区域不会与float box重叠。因此，可以触发生成一个新的BFC，如下：

<style>
.b{
    height: 200px;
    overflow: hidden; /*触发生成BFC*/
    background: blue;
}
</style>

May 29 '19 15:05 YvetteLau

Step-By-Step Step-By-Step copied to clipboard

什么是BFC？BFC的规则是什么？如何创建BFC？

一、什么是BFC？

二、BFC的原理是什么？

三、如何创建BFC？

写在前面

BFC是什么

BFC触发条件

BFC的规则

应用

BFC

如何触发块级格式化上下文（常见）

BFC 的应用场景

什么是BFC？BFC的原理是什么？如何创建BFC？

盒模型

基础盒模型(CSS basic box model)

视觉格式化模型(visual formatting model)

盒子的生成

BFC(Block formatting contexts)

定义

表现

块级相关的计算

正常流中的块级与非替换元素

浮动与非替换元素

绝对定位与非替换元素

1，什么是BFC？

2，BFC的原理是什么？

3，如何创建BFC?

4,BFC作用？

什么是BFC：

触发条件：

规则：

应用：

什么是BFC

先决条件

创建BFC

实际应该

✅ Deploy Preview for nostalgic-ptolemy-b01ab8 ready!

3.1 什么是 BFC？

3.2 如何触发 BFC？

3.3 BFC 的特性

3.3.1 BFC 会阻止 margin 塌陷

3.3.2 BFC 可以包含浮动的元素

3.3.3 BFC 可以阻止元素被浮动元素覆盖

什么是BFC？

如何创建BFC

BFC作用

BFC

BFC的创建

BFC的好处

what（什么是BFC）

术语普及

why（为什么要用BFC）

how（怎么做）

什么是BFC？如何创建BFC？

什么是BFC？

如何创建BFC？

什么是BFC？

BFC的原理是什么？

如何创建BFC？

BFC的定义

如何创建BFC

Box

Formatting Context

BFC布局规则

如何创建BFC

BFC的应用

Step-By-Step
Step-By-Step copied to clipboard

Deploy Preview for nostalgic-ptolemy-b01ab8 ready!