什么是BFC

大家好，我是IT修真院武汉第10期学院，一枚正直、纯洁、善良的前端程序员。

今天给大家分享一下，修真院官网任务task14，深度思考的知识点——什么是BFC。

1.背景介绍

BFC的含义：

BFC是Block Formatting Context的缩写，译为“块级格式化上下文”。说白了就是块级元素的布局渲染规范。触发BFC的block是遵循此规范的。

2.知识剖析

BFC有哪些规则？

下文的“BFC容器”指的是触发了BFC规范的容器。

1.触发BFC的容器内部的block是一个一个从上往下排列的，跟HTML的规范一样（块级元素换行显示）。

2.BFC容器内，box的外边距由margin决定，两个相邻元素的外边距由最大margin决定而且会重叠（如果一个元素margin为200px，另一个为100px，那么它两的外边距会取最大值200px）。

3.BFC容器内的block子元素与BFC容器的border-left紧贴（从右往左格式化的就是border-right）。

4.BFC容器内部的float元素不会导致BFC容器崩塌，也就是说BFC容器能计算float元素的宽高。

5.BFC里面的子元素不会影响外面，外面也不影响里面。

3.常见问题

如何触发BFC？

4.解决方案

想触发BFC，有5个方法，但是我就用了一个最常用的——overfloat不为默认值(visibel)

一般对样式没有冲突的话，我都会使用overflow：hidden；

5.编码实战

触发BFC以前：

触发BFC以后

使用场景？

用过bootstrap的朋友应该都知道里面有一个强大的功能——栅格系统。

栅格系统就是利用float特性实现的。所以有时候我们需要利用BFC来满足我们的需求。

当然也有非常多其他的使用场景，再次就不一一列举了。

6.扩展思考

上面讲的都是BFC元素跟同级元素的例子，那BFC子元素怎么设置边距合并？

7.参考文献

http://www.jianshu.com/p/bf927bc1bed4

8.更多讨论

详情请看：

视频链接

PPT链接

问：BFC跟clearfix有什么区别？

答：clearfix是清除浮动，利用clear：both；来消除两边float对其的影响，从而达到撑开容器清除浮动；而BFC是闭合浮动，就是使容器能够感知到浮动元素，并且能计算float元素的高度。

问：除了BFC还有哪些常用的FC？

答：IFC——行内格式化上下文，当然KFC也经常用（手动滑稽）。