关于BFC的总结

虽然工作这么多年了，但是如果让我直接解释一下什么是BFC的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。大家也可以关注我的GitHub后续的更新

1.BFC的基本概念

首先，贴出官方文档，https://www.w3.org/TR/2011/RE...
CSS2.1规范的中文翻译：https://github.com/ayqy/CSS2-1

下面是原文的摘抄

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.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

For information about page breaks in paged media, please consult the section on allowed page breaks.

翻译一下：
浮动，绝对定位的元素，非块盒的块容器（例如inline-blocks，table-cells和table-captions），以及’overflow’不为’visible’的块盒（当该值已被传播到视口时除外（except when that value has been propagated to the viewport））会为其内容建立新的块格式化上下文

在一个块格式化上下文中，盒在垂直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的垂直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的垂直外边距会合并

在一个块格式化上下文中，每个盒的左外边界（left outer edge）挨着包含块的左外边界（对于从右向左的格式化，右外边界挨着）。即使存在浮动（尽管一个盒的行框可能会因为浮动而收缩译注：环绕浮动元素放置的行框比正常的行短一些），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）

感觉这样直接贴文档还是不太有条例，简书上有一篇文章讲的比较好。我摘录了一部分。
原文：https://www.jianshu.com/p/666...

在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。

1.1 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；

run-in box:

css3 中才有,https://codepen.io/wenjul/pen...

1.2 Formatting context

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

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

1.3 BFC 定义

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

1.4 BFC的布局规则

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

2. 如何创建BFC（哪些元素会生成BFC）？

其实在规范里已经差不多列出了BFC出现的场景了，下面分条目再次列举一下。

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible( hidden,scroll,auto, )

3. 回答几个关于BFC的问题

4. 父子元素的边距重叠现象

首先抛出一个问题，如果想让一个子元素的顶部距离父元素100px,你会怎么办呢。你肯定会说。给子元素设置margin-top为100px不就行了吗？对吗？不仅仅如此。你还需要注意不让其产生边距重叠。

首先我们试着写一下代码，看看效果

html代码

<div id="parent">

  <div id="child"></div>

</div>

css代码

#parent{

  background:#ccc;

  height:400px;

}

#child{

  background:blue;

  height:50px;

  margin-top:100px;

}

出来的效果，你也可以在codepen上查看https://codepen.io/zhaojianxi...

what？黑人问号脸？难道不是应该是下面这样的效果吗？我只设置了子div，为什么父子同时向下移动了？？

本质是因为同一个BFC内垂直方向的margin合并现象，所有挨着的两个或者多个盒元素的margin会合并为一个margin并共享。挨着的意思是同级别或者是嵌套，并且他们之前没有非空内容，padding或者border分割。

知道了这种现象之后，解决办法就可以针对性的解决了。我们的方案有很多。

方案一

因为同一个BFC中才会出现这种现象。那我们可以把父元素变成一个BFC。那子元素的边距就不会影响到父元素了。把父元素变成一个BFC的方法有很多。我们在上边也列举了什么情况下会产生BFC。所以我们可以把父元素的float属性设置为非none，也可以将position改为absolute或fixed，也可以将display设为inline-block, table-cell, table-caption, flex, inline-flex。也可以将overflow设置为非visible( hidden,scroll,auto, )我们这里用overflow:hidden来演示;

https://codepen.io/zhaojianxi...

方案二

我们也可以在子元素的前边放置一个非空元素。这样隔开了子元素和父元素的margin的相碰
https://codepen.io/zhaojianxi...

方案三

同样我们可以给父元素设置一个border，或者padding，来隔开子元素和父元素的margin的相碰
https://codepen.io/zhaojianxi...

用五种方法实现三列布局

要求：两侧宽度固定，中间一列宽度自适应

利用浮动 https://codepen.io/zhaojianxi...
利用绝对定位 https://codepen.io/zhaojianxi...
利用table https://codepen.io/zhaojianxi...
利用flex https://codepen.io/zhaojianxi...
利用grid https://codepen.io/zhaojianxi...

github：https://github.com/JesseZhao1...