BFC（Block Formatting Context）
特点：形成独立的渲染区域，内部元素的渲染不会影响外界布局，反之亦然。
注意：一个BFC的范围包含创建该上下文元素的所有子元素，但不包括这些子元素的内部元素--一个元素不能同时存在于两个BFC中。
形成条件：
- 根元素（
<html>） - 浮动元素（float 值不为
none） - 绝对定位元素（position 值为
absolute或fixed） - 行内块元素（display 值为
inline-block） - 表格单元格（display 值为
table-cell，HTML 表格单元格默认值） - 表格标题（display 值为
table-caption，HTML 表格标题默认值） - 匿名表格单元格元素（display 值为
table、table-row、table-row-group、table-header-group、table-footer-group（分别是 HTML table、tr、tbody、thead、tfoot 的默认值）或inline-table） - overflow 值不为
visible、clip的块元素 - display 值为
flow-root的元素 - contain 值为
layout、content或paint的元素 - 弹性元素（display 值为
flex或inline-flex元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器 - 网格元素（display 值为
grid或inline-grid元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器 - 多列容器（column-count 或 column-width (en-US) 值不为
auto，包括column-count为1） column-span值为all的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中 (规范变更, Chrome bug)
作用：
1. 包含内部浮动 contain internal float
给父盒子创建BFC
2. 排除外部浮动 exclude external floats
给正常流盒子设置BFC
3. 避免外边距重叠 avoid margin collapsing
给并列的两个子盒子分别添加BFC
扫一扫
530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
