CSS中的BFC详解
概述
关于BFC, 可分4点描述：
详述
1. 什么是BFC？
BFC , 全称 Block Formatting Context , (块级)格式化上下文。是Web页面中盒模型布局的CSS渲染模式, 指一个独立的渲染区域或者说是一个隔离的独立容器。
2. 什么情况时才产生/称之为BFC？
- 浮动元素(float): 除 none 外的任意值, 见下
图1; - 定位元素(position): 值为absolute、fixed的定位元素, 见下
图2; - 显示定义(display): 值为 inline-block、table-cell、table-caption的定义, 见下
图3; - 滚动(超出)定义(overflow): 除 visible 外的任意值定义, 见下
图4.
3. BFC有什么特性？
* 内部的Box会在垂直方向上一个接一个的放置
* 垂直方向上的距离由margin决定
* BFC的区域不会与float的元素区域重叠
* 计算BFC的高度时, 浮动元素也参与计算
* BFC就是页面上的一个独立容器, 容器里面的子元素不会影响外面元素, 反之也如此
4. BFC特性具体分析
1. 内部的Box会在垂直方向上一个接一个的放置：一般情况下, 垂直方向上, 块级元素均是逐行相隔显示的
2. 垂直方向上的距离由margin决定：在垂直方向上, 不同块级元素的间隔由 margin 决定, 但一般情况下是在 相隔块级元素各自的margin值中 取较大值, 故会存在margin值重叠的情况。而定义为BFC后, 则可解决该问题, 采用margin累加的数值为间隔
3. BFC的区域不会与float的元素区域重叠：一般情况下, 元素A 被设置为浮动float元素后, 元素A 属于半脱离文档流, 相隔的元素B 会重叠到元素A 的下面区域；但元素B 设置为BFC后, 元素B 便可不会与元素A的区域重叠, 而是与元素A相邻/挨着显示
4. 计算BFC的高度时, 浮动元素也参与计算：元素设置为BFC后, 其中浮动元素也会被计算, 避免高度塌陷/高度缺失问题
5. BFC就是页面上的一个独立容器, 容器里面的子元素不会影响外面元素：例如可通过设置为BFC元素 来解决元素浮动的问题
(图1)
(图2)
(图3)
(图4)
