CSS之BFC浅析

前言

无意间看到一个web前端面试场景，面试官询问你了解BFC吗？ 此时我懵了，转职前端也一年有余了，BFC第一次听说，真是羞愧呀😭😭😭
所以本着知耻而后学的🙉，特意去查找了一番资料，学习学习🧐🧐🧐

---

提示：以下是本篇文章正文内容，仅供大学一起参考学习

一、BFC是什么？

BFC (Block Formatting Context):块格式化上下文，是用于布局块级盒子的一块独立渲染区域，并与外部区域无任何关联。换句话说bfc外部区域发生翻天覆地的变化，也不会影响bfc内部区域。

MDN解释：是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

二、产生BFC的条件

• 根元素（）
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 更多的请参考 MDN.

三、BFC的约束规则

• 内部的Box会在垂直方向上一个接一个的放置
• 垂直方向的距离由margin决定(属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关)
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算

结语

提示：关于BFC相关的更多知识，欢迎大家一起交流学习


更多框盒模型：
IFC:行内格式化上下文(Inline Formatting Contexts)
FFC:自适应格式化上下文(Flex Formatting Contexts)
GFC:网格布局格式化上下文(GridLayout Formatting Contexts)