BFC及其应用
最初在看见BFC，两眼一愣，这是个什么玩意，看过的两本书上都没有谈论到。
于是balabala一顿谷歌，现在勉强能弄懂了（然后又是满屏幕的overflow hidden，这是病得治啊！），然后就整理了一下。
BFC
在了解BFC之前，首先需要弄清楚的是盒子模型，这是CSS布局的对象和基本单位。
可以说这样说，一个页面，是由许多的盒子组成的，元素的类型与display的属性，决定了这个盒子的类型，不同的盒子，其渲染方式是不一样的。（官方的说法叫做Formatting Context，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用）
如果display属性为block的盒子，就会参与block fomatting context，也就是上面所说的BFC，此外还有Inline formatting context (简称IFC)。（context这个词是名词，原意是环境/上下文，放在这里略显晦涩，我只能将它直译成“块级元素渲染环境”，当然这并不妨碍理解）
触发BFC
BFC是CSS2.1规范中的一个概念，满足下面任意一个条件的块级元素都会触发BFC。为了加深印象，正反情形我都列举出来了。
- 根元素，是指文档树中没有父元素的元素，也就是最顶层结构的元素，一般情况下是html元素；
- float属性不为none，即float为left||right；
- position不为relative，即position为absolute||fixed；
- display为inline-block, table-cell, table-caption, flex, inline-flex，这里特别需要注意的是inline-block。
- overflow不为visible，即overflow为hidden||auto||scroll，这里特别需要注意的是hidden;
BFC的规则
了解怎么“制造”BFC元素之后，就应该认识这些BFC具有的布局规则了。
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠，准确的说只有在同一个BFC内的元素才会发生外边距折叠。
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此，这就是BFC所具有的大名鼎鼎的独立区域属性，躲进小楼成一统，管它春夏与秋冬。
- BFC的区域不会与float box重叠,即旁边的浮动元素是无法遮挡住BFC元素的。
- BFC可以包含浮动元素，意思就是BFC的高度计算是包括其浮动的子元素的，浮动元素的高度也参与BFC高度计算（重要的事情说两遍！），这下即使子元素全部都是浮动元素，BFC也可以知道它自己的高度了。
使用BFC进行布局
BFC的布局规则弄清楚之后，当然就应该学习他的布局作用了，最常见的作用就是清除外边距折叠与清浮动了。
清除外边距折叠
由布局规则第二条可知，当两个相邻的块级元素不再同一个BFC中时，是不会发生竖直方向上的外边距重叠的，在有的时候莫名其妙的发生了外边距不重叠，或者是在某些情况下不需要这种折叠的时候，就可以用到BFC了。
需要注意的是父块为BFC的情况下也不会与子块发生外边距重叠。
清浮动
由布局规则第六条可知，BFC可以包含浮动元素，并正确的显示自己高度，如果父块没有设置高度则由其内部的子块撑开，BFC仍然处于文档流中，因此可以触发BFC达成清浮动的目的；
此外，由于BFC还不与浮动元素的aside重叠（第五条），因此会根据自身宽度和aside的宽度，自动变窄。
最后
根据有道云上写的笔记大概整理了这么点东西，以前对于overflow hidden可以清浮动一直不太理解，原来就是BFC的作用，果然需要还是有深度的学习才行。这篇文章还有待补充，先挖个坑吧。
你要请我喝一杯奶茶？
版权声明：自由转载-非商用-保持署名和原文链接。
本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。
