BFC
BFC
块级格式化上下文Block Formatting Context
,是Web
页面的可视CSS
渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域,是用于布局块级盒子的一块渲染区域,并且与这个区域的外部毫无关系,是一个独立的区域,是一个环境。
触发BFC
- 浮动float
- 非静态定位position为absolute或fixed
- display为inline-block、table-cell、table-caption、flow-root、flex 或 inline-flex 元素的直接子元素、grid 或 inline-grid 元素的直接子元素
- overflow不为visible
- contain 值为 layout、content 或 paint 的元素