前言
BFC(Block Formating Context)块格式化上下文是CSS中比较常见的现象，下面简单介绍一下触发这种机制的条件
什么是BFC？
不解释了，只知道怎么触发，没有详细的定义。
MDN
个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建：
- 根元素或其它包含它的元素
- 浮动元素 (元素的 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 的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。
CSS规范
浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文
在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并
在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）
BFC的应用
看着这些官方解释，也只是说了一些触发BFC的条件，下面我说一下BFC应用：
overflow:hidden
- 清除浮动（但是不是真实的清除浮动，只是长的像，因为触发BFC后爸爸会自动包住儿子节点）
http://js.jirengu.com/rozaxufetu/1/edit?html,css,output - 左面固定，右面自适应的布局(兄弟元素之间会自动排斥，因为两个自成一家吧。)
http://js.jirengu.com/joyecuseha/1/edit - 盒子坍塌（兄弟上下margin合并,加div来解决）
http://js.jirengu.com/rozaxufetu/1/edit?html,css,output
小结
解释不了BFC，仅仅知道触发的条件，有的效果并不是我们想要得到的，但我们可以根据这些现象去解决一些问题
网友评论