浮动，绝对定位元素，非块盒的块容器（例如，
inline-blocks，table-cells和table-captions）和overflow不为visible的块盒（当该值已被传播到视口时除外（except when that value has been propagated to the viewport））会为它们的内容建立一个新的块格式化上下文
BFC布局规则:
BFC内部盒会在垂直方向,一个接一个的放置
盒的垂直方向的距离由
margin决定.属于同一个BFC的两个相邻盒子的margin会发生重叠每个元素的
margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反).即使存在浮动也如此BFC的区域不会与
float box重叠(利用这个特性可以做自适应窗口大小)BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素.反之也是如此
计算BFC高度时,浮动元素也参与计算(清除浮动的原理)
块格式化上下文由以下之一创建:
根元素或其它包含它的元素
浮动(元素的
float不是none)绝对定位的元素(元素具有
position为absolute或fixed)行内块 inline-blocks(元素具有
display:inline-block)表格单元格(元素具有
display:table-cell,表格单元格默认属性)表格标题(元素具有
display:table-caption,表格标题默认属性)块元素 元素具有
overflow值不是visible弹性盒子flex boxes(元素具有
display:flex或inline-flex)display:flow-root
一个块格式化上下文包括创建它的元素内部所有内容,除了会创建新的块格式化上下文的元素
BFC可以解决margin折叠问题,需要注意的是,overflow:hidden等属性只在父子元素下起作用,相邻兄弟元素无效
BFC可以改变float的覆盖兄弟元素的问题,实现一侧定宽的布局,还可以解决父元素塌陷问题
