BFC（Block Formatting Context）是CSS布局中的关键概念，用于解决边距重叠和布局问题。它定义了块级元素如何在区域内垂直排列，以及如何与外部元素相互作用。BFC可以通过特定条件如浮动、绝对定位等方式触发，其主要作用包括避免元素被浮动元素覆盖、清除内部浮动以及防止边距重叠。通过理解和应用BFC，可以更好地控制网页布局和解决常见的CSS样式问题。
BFC(边距重叠解决方案)
1.基本概念：
BFC块级格式化上下文
BFC 是 CSS 布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 。
父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。
2.BFC原理：
（1）内部的 Box 会在垂直方向，从顶部开始一个接着一个地放置；
（2）Box 垂直方向的距离由 margin (外边距)决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠；
（3）每个元素的 margin Box 的左边， 与包含块 border Box 的左边相接触，（对于从左到右的格式化，否则相反）。即使存在浮动也是如此；
（4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置 float；
（5）BFC 的区域不会与 float Box 重叠（清浮动）;
（6）计算 BFC 的高度时，浮动元素也参与计算。
3.BFC出现的情况：
0、根元素，即 HTML 元素（最大的一个 BFC）
1、浮动（ float 的值不为 none ）
2、绝对定位元素（ position 的值为
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
