块格式化上下文(Block formatting contexts)

浮动，绝对定位元素，非块盒的块容器（例如，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

BFC可以解决margin折叠问题,需要注意的是,overflow:hidden等属性只在父子元素下起作用,相邻兄弟元素无效

BFC与float

BFC可以改变float的覆盖兄弟元素的问题,实现一侧定宽的布局,还可以解决父元素塌陷问题

细说CSS中的BFC
学习格式化上下文