BFC 是块级格式化上下文(Block Formatting Context)的缩写,是 CSS 中一个重要的概念,用于控制块级盒子的布局及浮动元素的交互。BFC 是一个独立的渲染区域,内部的块级盒子会按照特定的规则进行布局,不会影响到外部元素的布局。
BFC 的特点和作用包括:
浮动清除:在 BFC 中,浮动元素的父元素会包裹浮动元素,防止浮动元素溢出到父元素外部。
边距折叠:在 BFC 中,垂直相邻的块级盒子的外边距会发生折叠,不会传递到 BFC 外部。
防止文字环绕:在 BFC 中,块级盒子不会围绕浮动元素排列,而是会在浮动元素的下方显示。
自适应高度:BFC 可以包含浮动元素,使得父元素的高度能够自适应内部元素的高度。
触发 BFC 的条件包括:
根元素(<html>)
浮动元素(float 不为 none)
绝对定位元素(position 为 absolute 或 fixed)
行内块元素(display 为 inline-block)
表格单元格(display 为 table-cell)
表格标题(display 为 table-caption)
包含块的 overflow 属性不为 visible
通过创建 BFC,我们可以更好地控制页面布局,解决一些常见的布局问题,如浮动清除、边距折叠等。