YvetteLau / Step-By-Step

不积跬步,无以至千里；

705 stars 66 forks source link

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

Open YvetteLau opened 5 years ago

shenanheng commented 5 years ago

概念(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重叠

chang229 commented 5 years ago

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的高度时，自然也会检测浮动盒子的高度，它是一个独立的渲染区域。

luohong123 commented 5 years ago

一、什么是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 影响，而是实现更健壮、更智能的自适应布局。

woyiweita commented 5 years ago

了解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样式，即可解决“父元素高度塌陷”的问题、

MissNanLan commented 5 years ago

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

写在前面

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>

![同一BFC的两个box发生margin重叠.png](https://upload-images.jianshu.io/upload_images/4092152-1599e7024ddedd5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- after

南蓝

nanlan

![阻止了margin重叠.png](https://upload-images.jianshu.io/upload_images/4092152-56a68f4f998bc82f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2. **清除内部浮动**
根据BFC的规则**计算BFC的高度时，浮动元素也参与计算**
- before
![image.png](https://upload-images.jianshu.io/upload_images/4092152-42b6ea01de80072d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
解决办法将parent设置`overflow:hidden`,产生一个BFC，既可以让浮动元素参与高度计算
- after
![image.png](https://upload-images.jianshu.io/upload_images/4092152-656e9753a4ec0b16.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
代码超级简单就不贴了
3. **自适应两栏布局**
根据BFC的规则**每个元素的margin box的左边， 与包含块border box的左边相接触，即使存在浮动也是如此。**

南蓝

nanlan

![image.png](https://upload-images.jianshu.io/upload_images/4092152-eea7ceba87511523.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
解决办法就是为右边的部分重新设置一个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>

南蓝

nanlan


![image.png](https://upload-images.jianshu.io/upload_images/4092152-ca8a203ac1fe20ba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
以上都是BFC规则**BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此**
总算是对BFC有清晰地理解了

AILINGANGEL commented 5 years ago

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中，因为互不影响，所以不会发生合并

Cain-kz commented 5 years ago

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

lqzo commented 5 years ago

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）。

KRISACHAN commented 5 years ago

什么是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模块，内容如下：

xdandsl commented 5 years ago

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）防止文字环绕

yeyeyess commented 5 years ago

### 什么是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

yaxinlove commented 5 years ago

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;

tianyuandsb commented 5 years ago

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 可以阻止元素被浮动元素覆盖

Jinminrui commented 5 years ago

什么是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 区域之中)
自适应两栏布局
可以阻止元素被浮动元素覆盖

haxisi001 commented 5 years ago

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 (会形成一个局部块状内容区域，不受其他布局影响)

dashengzi66 commented 5 years ago

(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:解决高度塌陷问题

zhangxianhui commented 5 years ago

什么是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避免外边距折叠解决容器高度不会被撑开的问题

jodiezhang commented 5 years ago

Formatting Contexts分类 Block Formatting Contexts 块格式化上下文 Inline Formatting Contexts 行格式化上下文 Flex Formatting Contexts Flex格式化上下文

页面上所有的一切都是格式化上下文的一部分，或者说属于一块区域，什么样的区域呢？在这块区域，元素如何展示是被定义好的。

创建一个新的block formatting context 任何默认为块布局的元素为他们的子元素创建了一个BFC。另外CSS的属性也能使元素创建一个BFC，即使人家本来不是默认块级显示。

这非常有用，因为一个新建的BFC可以和外部的FC工作，新建的BFC相当于一个迷你的小生态，嵌套在外层的布局中。

会新建一个BFC的情况 1.使用float的元素 2.绝对定位的元素（包括position:fixed 或者 position:sticky） 3.使用了 display：inline-block的元素 4.table cell或者元素使用了 display：table-cell包括匿名的表格使用了display:table-*属性 5.使用了display:table-caption的表格标题

块级元素的overflow被设为了处visible之外的值 7.display:flow-root
使用了contain:layout,content 或者strict的元素 9.flex item 10.grid item 11.muticol containers---没学过 12.column-span设为all的元素

上面这个例子中，第一个DIV下是一个BFC，但是子的DIV使用了浮动，使这个元素脱离了原来的文档流。在box的样式中加入overflow:auto 或者其他不为visible的值，相当于重新创建了一个BFC，包含了这个浮动的元素。

但是我们这里用overflow纯粹是为了创建一个BFC，所以并不好，阅读上会不好。我们还可以用flow-root,所有里面的元素都会在新生成的BFC中，浮动元素也不会跑出来。

BFC布局规则

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

链接：https://www.jianshu.com/p/66632298e355

让一个元素脱离文档流 1.使用浮动 floated items 2.绝对定位 items with position: absolute (including position: fixed which acts in the same way) 3.the root element (html)

darlingyz commented 5 years ago

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

Chorer commented 5 years ago

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 后，兄元素将不会被浮动的元素覆盖 ———— 不会被覆盖，意味着兄弟元素出现在浮动元素的旁边或者下面，具体取决于父元素的宽度。如果父元素的宽度足以包含这两个子元素的宽度之和，则子兄弟元素和子浮动元素并排。如图：

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

riluocanyang commented 5 years ago

什么是BFC？

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

如何创建BFC

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

BFC作用

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

muyiweibo commented 5 years ago

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

yelin1994 commented 5 years ago

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 来使父节点撑开
避免文字环绕

ZadaWu commented 5 years ago

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）。

CCZX commented 5 years ago

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

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

plane-hjh commented 5 years ago

什么是BFC？如何创建BFC？

什么是BFC？

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

如何创建BFC？

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

MissWXiang commented 5 years ago

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）

huangsiyuan2015 commented 5 years ago

什么是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)

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

ivan0525 commented 5 years ago

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

YvetteLau commented 5 years ago

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>

chongyangwang commented 5 years ago

BFC的概念

BFC即块级格式上下文 block formatting context,通俗理解在布局中拥有BFC属性或触发BFC的元素就是文档中一个独立的块器内部元素无法对外部元素造成影响外部元素也无法影响内部元素

触发BFC的方式

overflow的值不为visible 可以为over-flow:hidden,over-flow:auto; 2.display的值为table-cell inline-block 3.float的值为none 4.position的值不为relative static 5.根元素默认BFC

BFC的好处

解决高度塌陷问题
解决外边距重叠问题

0uzu0 commented 5 years ago

BFC：块级格式化上下文。BFC内的元素布局不会影响到外部

触发 BFC

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

BFC的好处

解决高度塌陷问题
解决外边距重叠问题

web-data-MrLi commented 5 years ago

BFC(Block formatting context)块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，规定了内部的如何布局，与这个区域外部毫不相干， BEC的布局规则;

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

那些元素会生成BFC呢？ 1.根元素 2.float的属性不为none 3.position为absolute或者fixed 4.display为inline-block, table-cell, table-caption, flex, inline-flex 5.overflow不为visible

BFC的应用场景

1.自适应布局栏（两栏适应和三栏适应） 2.清楚内部浮动 3.防止重叠的margin重叠

总结; BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

gaoluona commented 5 years ago

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述布局模式的流动模型。是W3C CSS2.1规范中的一个概念，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的的一些特性。通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

只要元素满足下面任一条件即可触发BFC特性： body 根元素浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells、flex overflow 除了 visible 以外的值 (hidden、auto、scroll)

浅析BFC原理及作用

Diamondjcx commented 5 years ago

什么是BFC

BFC：（Block Formatting Context）块格式化上下文，是web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单理解就是具备BFC特性的元素，就像被一个容易所包裹，容器内的元素再布局上不会影响外面的元素。

BFC原理？

在BFC的垂直方向上，边距会发生重叠
BFC区域不会与浮动区域重叠
BFC在页面上是一个独立的容器，与其他元素互不影响
计算BFC高度时，浮动元素也会参与计算
如何创建BFC？
设置浮动
设置定位
display值不为默认
overflow 值不为visible
BFC的应用
防止margin重叠（塌陷）
清除内部浮动
自适应多栏布局

Leafyyuki commented 5 years ago

BFC定义

文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。

FC是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用

通俗一点的方式解释:

BFC 可以简单的理解为某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。

常见的FC有BFC、IFC（行级格式化上下文），还有GFC（网格布局格式化上下文）和FFC（自适应格式化上下文）

BFC的原理

内部的box会在垂直方向，一个接一个的放置
每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
bfc的区域不会与浮动区域的box重叠
bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
计算bfc高度的时候，浮动元素也会参与计算

触发BFC

float的值不为none。
overflow的值为auto,scroll或hidden。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。

一点总结：display:table-cell; 是一个比较好用的属性（ie8+），跟inline-block具有相同的效果。但是我们知道，当元素inline-block后，相邻元素之间会有空隙(准确的说法详见3.3)，而table-cell不会。另外table-cell的宽度永远不会超过父元素的宽度。

应用场景

自适应两栏布局

圣杯布局
双飞翼布局
清除内部浮动
父元素高度塌陷，没法包裹子块级元素
1. 可以使用clear清除浮动
2. 也可以设置父元素overflow:hidden
  防止垂直margin重叠
垂直的两个块级元素中子元素有边距，会叠加到外层使得两个块级元素间有空隙解决办法：
1. 元素加透明边框
2. 通过overflow:hidden把块元素形成一个bfc

0xBrooke commented 5 years ago

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

哪些元素会生成BFC

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

BFC应用： 防止margin重叠（塌陷） / 阻止元素被浮动元素覆盖 / 清除内部浮动 / 自适应多栏布局的 (相关css验证方法,很多 ......)

总结: 因为BFC内部的元素，绝对不会与外部元素相互影响，因此当BFC外部存在浮动时，它不会影响BFC内部Box的布局，BFC会通过变窄，而不与浮动元素有重叠；同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会把内部浮动元素的高度也计算在内，避免margin重叠也是这样一个道理.

zyq503454535 commented 5 years ago

BFC：block formatting context(块级格式化上下文) 作用：隔离外部元素与内部元素形成BFC方式 display: table-cell table table-caption overflow:不为visible position:absolution, fixed float:不为none 应用：防止margin重叠，清除内部浮动

954545647 commented 5 years ago

Box

Box 是CSS布局的对象和基本单位，页面是由若干个Box组成
不同类型的Box会参与不同的 Formatting Context

Formatting Context

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

BFC

BFC块级格式化上下文
是一个独立的区域，让处于BFC内部的元素与外部的元素互相隔离

BFC触发条件

根元素本身就会形成一个块级格式化上下文
overflow 不为 visible
position: relative / absolute
float 不为 none
display 为 inline-block，table-cell，table-caption

BFC的规则

内部的 Box 会在垂直方向放置
属于同一个BFC的两个相邻 Box 的 margin 会发生重叠
计算BFC的高度时，浮动元素也参与计算
BFC的区域不会与float box重叠。
BFC内，每个盒子的左外边缘接触内部盒子的左边缘（对于从右到左的格式，右边缘接触）。即使在存在浮动的情况下也是如此。除非创建新的BFC。

BFC的应用

阻止margin重叠

让其中一个div脱离出来即可，形成单独的BFC块

清除内部浮动


根据BFC的规则计算BFC的高度时，浮动元素也参与计算

让父级元素设置 overflow：hidden 即可产生一个BFC，让浮动元素计算高度


+ 自适应两栏布局

DazhiFe commented 5 years ago

BFC是耳熟能详的一个东西了，经常听到，其实在项目中也经常用到，比如最常用的清除浮动，自适应两栏布局等等。只是都没有去深究其原理和相关的知识点，今天就一起来好好学习一下吧。

要明白BFC是什么，我们要先来了解几个相关的概念。

盒模型

MDN对其描述如下：

当对一个文档进行布局(lay out)的时候，浏览器的渲染引擎会根据标准之一的CSS基础盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS决定这些盒子的大小、位置和以及属性（例如颜色、背景、边框尺寸...）。

每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

boxmodel-(3)

我们在浏览器的控制台也可以很清楚的看到页面的每一个元素（除了单独的文本元素），其实都是一个盒子：

box

更加详细的介绍可以参考MDN或者W3C规范的描述：

http://www.ayqy.net/doc/css2-1/box.html(翻译版)

视觉格式化模型

MDN 对其描述如下：

CSS视觉格式化模型（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是CSS的基础概念之一。

视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定：

盒子的尺寸：精确指定、由约束条件指定或没有指定
盒子的类型：行内盒子（inline）、行内级盒子（inine level）、原子行内级盒子（atomic inine-level）、块盒子（block）
定位方案（position scheme）：普通流定位、浮动定位或绝对定位
文档树中的其他元素：即当前盒子的子元素或兄弟元素
视口尺寸与位置
所包含的图片的尺寸
其他的某些外部因素

关于不同类型盒子的介绍，大家可以直接看MDN，写的很详细了，这里就不再阐述。这边着重讲下定位方案。

定位方案

一旦生成了盒子，CSS引擎就需要定位它们以完成布局。在定位的时候，浏览器会根据元素的盒类型和上下文对这些元素进行定位，可以说盒就是定位的基本单位。定位时有三种定位方案，分别是：常规流(即普通流)、浮动流以及绝对定位。

常规流（Normal flow）

在常规流中，盒子一个接着一个排列；
在块级格式化上下文里面，它们竖着排列；
在行内格式化上下文里面，它们横着排列；
当position为static或relative，并且float为none时，会触发常规流
对于静态定位(static positioning),position: static，盒的位置是常规流布局里的位置；
对于**相对定位*(relative positioning)，position: relative，盒偏移位置右这些属性定义：top、bottom、left、right。即使有偏移，仍然保留原有的位置**，其他常规流不能占用这个位置。

浮动（Floats）

盒成为浮动盒（floating boxes）；
它定位于当前行的开头或末尾；
这导致常规流环绕在它的周边，除非设置clear属性；

绝对定位（Absolute positioning）

绝对定位方案，盒从常规流中被移除，不影响常规流的布局；
它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；
对于position: absolute，元素定位相对于最近的一个relative、absolute或fixed的父元素，如果没有则相对于body

FC(Formatting context)

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

CSS2.1中只有BFC和IFC，CSS3中还增加了GFC和FFC。我们主要来讲下BFC。

好了，接下来轮到我们的主角BFC出场了。

BFC是什么

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

讲了这么多概念，说下自己的理解，如果有不对的地方，烦请指出，感激不尽。

当我们对一个页面进行布局的时候，浏览器的渲染引擎会根据CSS的盒模型将所有元素表示为一个个盒子；
盒子的定义是由视觉格式化模型来定义的，盒子的类型可以分为：行内盒子（inline）、行内级盒子（inine level）、原子行内级盒子（atomic inine-level）、块盒子（block）；
接下来就是真正的布局开始，浏览器会根据盒子的类型和所处的上下文来对这些元素进行定位，定位有3种方案，分别是：普通流、浮动流和绝对定位。
普通流中的盒子就是属于一个格式化上下文，可能是块或是行内（格式化上下文），但不能两者都是。块级盒参与块格式化上下文。行内级盒参与行内格式化上下文。

是不是可以这样理解：BFC就是普通流中的元素布局定位时的一个执行环境？

BFC布局规则

内部的Box会在垂直方向，一个接一个的放置。（这边不是很理解，内部的Box不是也可能有行内元素吗？行内元素不是按水平方向来排列吗？这边可能还需要参考行内格式化上下文来理解，还有一个是writing-mode属性。）
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含快border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此（除非该盒建立了一个新的块格式化上下文）
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立的容器，容器里面的子元素不会影响到外面的元素，反之亦如此
计算BFC的高度时，浮动元素也参与计算

如何创建BFC

根元素
float属性值不为none
position为absolute或fixed
display为inline-block、table-cell、table-caption、flex、inline-flex
overflow不为visible
...

其实还有很多，这里列出的是一些比较常用的，跟详细的可以看MDN。

通过几个实例来加深理解

1.自适应两栏布局

实现自适应两栏布局的方法有很多，但是我觉得BFC的方式应该是最简单的了。

<body>
  <div class="container">
    <div class="side"></div>
    <div class="main"></div>
  </div>
</body>

.container {
  width: 400px;    
}

.side {
  float: left;
  width: 100px;
  height: 100px;
  background: lightpink;
}

.main {
  height: 300px;
  background: lightblue;
}

页面截图：

根据BFC布局规则第3条：

每个元素的margin box的左边，与包含快border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此（除非该盒建立了一个新的块格式化上下文）

即使存在浮动元素side，main的左边依然会与包含快的左边相接触。

根据BFC布局规则第4条：

BFC的区域不会与float box重叠

所以，我们可以给main创建一个新的BFC，这样就不会跟浮动的side重叠了，它会根据包含块的宽度和side的宽度，自动变窄。

给main加上overflow: hidden

main {
  overflow: hidden;
}

再来看下效果：

2.清除内部浮动

<div class="parent">
  <div class="child"></div>
</div>

.parent {
   width: 200px;
   border: 2px solid blue;
   background: lightblue;
}

.child {
  float: left;
  width: 100px;
  height: 100px;
  border: 2px solid red;
  background: lightcoral;
}

页面截图：

可以看到，由于子元素设置了浮动，而父元素又没有设置高度，导致父元素高度塌陷了：没有自动被子元素的高度撑开。

根据BFC布局规则第6条：

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

我们可以给父元素parent触发BFC，那么它在计算高度时，内部的浮动元素也会参与计算。

.parent {
  overflow: hidden;
}

再看下效果：

3.阻止margin重叠

<div class="box">box</div>
<div class="box">box</div>

.box {
  width: 200px;
  height: 200px;
  margin: 100px;
  background: red;
}

页面截图：

根据BFC布局规则第2条：

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

可以看到，第一个div的下边距跟第二个的上边距发生了重叠。

重叠的结果按照如下规则计算：

两个相邻的外边距都是正数时，重叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，重叠结果是两者绝对值的较大值。
两个外边距一正一负时，重叠结果是两者的相加的和。

产生重叠的必备条件：margin必须是邻接的!

我们只要给其中一个div外层再包裹一层div，然后触发其生成一个新的BFC，它们就不会发生重叠了。

<div class="box">box</div>
<div class="new-bfc">
  <div class="box">box</div>
</div>

.new-bfc {
  overflow: hidden;
}

页面截图：

还有很多其他的例子，比如可以避免文字环绕、多列布局等等，这里就不再一一列举，大家有兴趣的可以自己多尝试下，这里有一个网址可以在线演示，更加直观，链接地址：https://www.cnblogs.com/xiaohuochai/p/5248536.html

创建BFC的新方式

我们上面举的例子都是通过overflow来创建BFC，但是其实这个方法会有两个问题。

这些方法本身是有自身的设计目的的，所以在使用它们创建BFC时可能会存在一些副作用。例如，使用overflow创建BFC后，在某些情况下可能会看到出现一个滚动条或者元素内容被裁切。这是由于overflow属性的设计是用来让你告诉浏览器如何定义元素的溢出状态的。浏览器执行了它最基本的定义。
另一个问题是，即使在没有出现副作用的情况下，使用overflow也可能会使另一个开发人员感到困惑。他们可能会各种猜想：这里为什么要把overflow的值设为auto或hidden?原来的开发人员这样做的意义是什么？原来的开发人员是想让这里出现滚动条吗？

所以实际项目开发中，还需要根据项目的需求来选择合适的方法，最好也能在代码里写明注释。

那有没有什么更好的方式呢？CSS工作组定义了一个新的属性值：display: flow-root。

你可以使用display: flow-root安全的创建BFC，来解决上文中提到的各种问题：自适应两栏布局、清除内部浮动、阻止margin重叠等等。

caniuse上display: flow-root在各浏览器的兼容情况，看图：

目前来看，兼容性还是差了一点。

有关于flow-root的详细介绍可以看这篇文章：https://www.w3cplus.com/css3/display-flow-root.html

BFC概念理解

可以想象一下，BFC就相当于我们现实中的一个纸箱（盒子），箱子里面的东西的放置(布局)是不会受到外部其他东西的影响的，它形成了一个独立的封闭的区域。当然它里面东西的放置（布局）也不会影响到外面的东西。

最后

感谢您的阅读，希望对你有所帮助，希望你能通过这篇文章能对BFC有一个比较全面的理解并能实际应用到项目开发中。本人水平有限，如果文中有不当的地方烦请指正，感激不尽。

参考：

视觉格式化模型

块格式化上下文

前端精选文摘：BFC 神奇背后的原理

学习 BFC (Block Formatting Context)

[布局概念] 关于CSS-BFC深入理解

理解CSS布局和BFC

什么是BFC

noggcool commented 5 years ago

什么是BFC？BFC的规则是什么？如何创建BFC？什么是BFC？ BFC全称：Block Formatting Context，块级格式上下文。简单的来说就是一个盒子的内外无论如何变化，都互不影响。在我们浏览器中所有的元素以矩形（可审查元素查看）存在。 BFC用途：BFC的存在能够处理我们常见的高度塌陷，margin重叠，和自适应两栏等问题。其实最重要的是去实现自适应布局（参考自适应两栏）。 BFC如何创建： 1.display为inline-block,table-cell 2.float不为none 3.overflow不为visible 4.根元素 5.position为absolute和fixed BFC的规则： 1.内部的 Box 会在垂直方向放置，一个一个的放置 2.属于同一个BFC的两个相邻 Box 的 margin 会发生重叠 3.计算BFC的高度时，浮动元素也参与计算 4.BFC的区域不会与float box重叠。 5.BFC内，每个盒子的左外边缘接触内部盒子的左边缘（对于从右到左的格式，右边缘接触）。即使在存在浮动的情况下也是如此。除非创建新的BFC。有了BFC就不用频繁的清除浮动了

dunkezhang commented 5 years ago

什么是BFC

BFC 是一块独立的渲染区域，只有它内部的块级盒子参与它的布局。这些块级盒子的布局方式不会受BFC外部布局的影响，同时它们也不会影响BFC外部的布局。

BFC产生

以下任意一种情况都能在其内部产生BFC：

根元素或其他包含它的元素（注：我不是很理解这句话是什么意思）
postion 为absolute 和fixed的元素
float不为none的元素
overflow不为visible的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
内联块元素，即display的值为inline-block的元素；
流式布局根元素，display值为flow-root的元素；
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）

BFC布局规则

内部的box会在垂直方向一个接一个的放置；
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
计算BFC的高度时，它内部的浮动元素也会被计算进去(可应用清除内部浮动)；
BFC的区域不会与float box重叠（自适应两栏布局）
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外部元素。反之也如此。

BFC应用场景

自适应两栏布局

<style>
body {
    width: 300px;
    position: relative;
}

.aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #f66;
}

.main {
    height: 200px;
    background: #fcc;
}
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

BFC的区域不会与float box重叠

我们可以通过通过触发main生成BFC，来实现自适应两栏布局。

.main {
    overflow: hidden;
}

两列自适应

清除内部浮动

浮动元素导致的高度塌陷

<style>
.par {
    border: 5px solid #fcc;
    width: 300px;
}

.child {
    border: 5px solid #f66;
    width:100px;
    height: 100px;
    float: left;
}
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

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

为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

.par {
    overflow: hidden;
}

防止垂直 margin 重叠

1.bfc内部的Box会发生margin重叠

  <div id="container">
    <div id='red'></div>
    <div id="yellow"></div>
    <div id="orange"></div>
  </div>

   #container {
      overflow: auto;
      border: 1px solid #000;
      width: 100px;
    }
    #container > div {
      width: 50px;
      height: 50px;
      margin: 20px;
    }
    div#red {
      background-color: red;
    }
    div#yellow {
      background-color: yellow;
    }
    div#orange {
      background-color: orange;
    }

红色Box，黄色Box，橘色Box发生塌陷,外边距最终相隔20px

2.给每个box创建bfc，可以看到原本折叠的外边距展开了。

  <div id="container1">
    <div>
      <div id='red'></div>
    </div>
    <div>
      <div id="yellow"></div>
    </div>
    <div>
      <div id="orange"></div>
    </div>
  </div>

#container1 {
  overflow: auto;
  border: 1px solid #000;
  width: 100px;
  margin-top: 30px;
}
#container1 > div {
  overflow: auto;
}
#container1 > div > div {
  width: 50px;
  height: 50px;
  margin: 20px;
}
div#red {
  background-color: red;
}
div#yellow {
  background-color: yellow;
}
div#orange {
  background-color: orange;
}

红色Box，黄色Box，橘色Box相距40px

参考资料

taoyaoyaoa commented 5 years ago

BFC 全称为块格式化上下文 (Block Formatting Context) 。

根元素或其它包含它的元素浮动元素 (元素的 float 不是 none) 绝对定位元素 (元素具有 position 为 absolute 或 fixed) 内联块 (元素具有 display: inline-block) 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性) 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性) 具有overflow 且值不是 visible 的块元素， display: flow-root column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

YvetteLau / Step-By-Step

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

一、什么是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

实际应该

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的应用

什么是BFC

BFC原理？

如何创建BFC？

BFC的应用

BFC定义

BFC的原理

触发BFC

应用场景

自适应两栏布局

清除内部浮动

防止垂直margin重叠

Box

Formatting Context

BFC