大家好，我是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.更多讨论
详情请看：
问：BFC跟clearfix有什么区别？
答：clearfix是清除浮动，利用clear：both；来消除两边float对其的影响，从而达到撑开容器清除浮动；而BFC是闭合浮动，就是使容器能够感知到浮动元素，并且能计算float元素的高度。
问：除了BFC还有哪些常用的FC？
答：IFC——行内格式化上下文，当然KFC也经常用（手动滑稽）。
网友评论