其实许小珂很早以前就已经接触到BFC这个概念了，只是一直没完全弄明白，直到如今依然感觉比较模糊。不过模糊没关系，先总结一下最近的研究成果，留待以后慢慢完善修改。而且总结也是一个自我提升的好办法。
对于一些前端新人来说BFC的概念也许有些陌生，但一些清除浮动的方法也许你用的已经很熟练了，比如给父元素添加overflow:hidden;可以使父元素包裹住浮动元素，而这个方法的原理就是利用BFC的某些规则。
BFC基础概念
Formatting context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。
BFC
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成块级格式化上下文。
生成BFC元素
根元素；
float属性不为none；
position为absolute或fixed；
display为inline-block, table-cell, table-caption, flex, inline-flex；
overflow不为visible；BFC的布局规则
内部的Box会在垂直方向，一个接一个地放置；
BFC就是页面上的一个隔离的独立容器，容器内元素不会影响到外面的元素的布局，反之外面元素也不会影响容器内的元素；
在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。
BFC的区域不会与float box重叠，如果通过设置相邻非浮动元素的margin值设置两个box的距离，应该把浮动元素的宽度考虑进去；
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生折叠；
计算BFC的高度时，浮动元素也参与计算；
当看到这些规则之后突然明白了
为什么设置浮动元素的父元素为overflow:hidden;之后父元素会包裹住浮动元素，这不正对应计算BFC的高度时，浮动元素也参与计算这个规则。
为什么两个相邻的元素之间的margin值会发生折叠；
为什么给浮动元素的父元素设置display:inline-block;后，在给其爷爷辈的元素添加属性时更加如意。例子请看让浮动导航栏元素居中显示的解决办法
…
其实布局中所展现的现象背后都有其原理，就看你愿不愿意深入研究。本篇文章许小珂暂时没有写代码案例，不过超链接所指的文章里面有部分针对块级格式化上下文规则的案例，您也可以自己copy下来检验下是否正确。
发表评论