一个块格式化上下文（block formatting context）由以下之一创建：
根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素，//一般用overflow:hidden
display: flow-root //超级棒的，不会在创建bfc的同时触发其他副作用
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
功能1：爸爸管儿子
用 BFC 包住浮动元素。(这 TM 不是清除浮动，.clearfix 才是清除浮动）
http://js.jirengu.com/rozaxufetu/1/edit?html,css,output爸爸变严厉
或者建个墙（border）也可以得到效果的
创建了这个以后，儿子管的严严的，孙子由儿子管（一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素）
然后内部的儿子之间的竖着的margin会合并（在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并）
在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）
功能2：兄弟之间划清界限
用 float + div 做左右自适应布局
http://js.jirengu.com/felikenuve/1/edit?html,css,output
兄弟之间划清界线，定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。
网友评论