BFC （block formatting context）：块级格式化上下文

• web 页面的可视化 CSS 渲染的一部分，布局过程中生成块级盒子的区域，浮动元素与其他元素的交互限定区域
• BFC属于普通流元素；且不会影响到外部元素

常见定位方案（3 种）

1.普通流

• 元素按照在 HTML 中的先后位置至上而下布局
• 行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行
• 所有元素默认都是普通流定位

2.浮动

• 元素先照普通流的位置出现，后根据浮动方向尽可能向左向右偏移

3.绝对定位

• 元素会整体脱离普通流，绝对定位元素不回对其兄弟元素造成影响

如何触发 BFC？

• 【1】浮动元素：float 的值 不是 none
• 【2】overflow 的值 不为 visible 的块元素
• 【3】display = table-cell、table-caption、inline-block、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex 或 inline-flex、grid 或 inline-grid
• 【4】绝对定位元素 position = absolute 或 fixed
• 【5】contain 值 为 layout、content 或 paint
• 【6】多列容器：column-count 或 column-width 不为 auto、包括 column-count 为 1

BFC 特性与作用？

• 1.避免外边距重叠
• 2.清除浮动
• 3.阻止元素被浮动元素覆盖

学习链接🔗 ：www.bilibili.com/video/BV1aZ…