小课堂【萌新】

【CSS】请描述 BFC(Block Formatting Context) 及其如何工作

分享人：计翔于

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

什么是BFC

Block Formatting Context，中文直译为块级格式上下文。

BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。 两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。

这里也间接指出了垂直相邻盒子margin合并的解决办法：就是给这两个盒子也创建BFC。

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模式呢？

BFC有哪些应用？

4.解决方案

有哪些方式能够触发BFC模式呢？

1、根元素

2、float属性不为none

3、position为absolute或fixed

4、display为inline-blcok、table-cell、table-caption、flex、inline-flex

5、overflow不为visible

BFC有哪些应用？

1. 清除内部浮动

我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。

2. 垂直margin合并

在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 折叠的结果：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个外边距一正一负时，折叠结果是两者的相加的和。这个同样可以利用BFC解决。

3. 创建自适应两栏布局

在很多网站中，我们常看到这样的一种结构，左图片+右文字的两栏结构。

如何创建BFC

float属性不为none

overflow不为visible(可以是hidden、scroll、auto)

position为absolute或fixed

display为inline-block、table-cell、table-caption

5.编码实战

6.扩展思考

Block Formatting Context在产生什么作用

1.Block Formatting Context可以阻止边距折叠（margin collapsing）。

2.Block Formatting Context可以包含内部元素的浮动。

7.参考文献

8.更多讨论

BFC还有哪些应用?

鸣谢

感谢大家观看

By 计翔于