CSS-BFC

• 概念
• BFC的特点
• BFC触发情况
• BFC的作用
  • 解决margin重合问题
  • 清楚浮动问题
  • 自适应两栏布局

🐴

概念

Block Fromating Context 简写为 BFC，被称作块级格式化上下文

MDN (opens new window)上是这样解释BFC的

BFC

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

说白了，其实就是页面中某个元素(如div)中拥有特定的css渲染规则，该区域不影响其它区域，为它起了一个名字叫做块级格式化上下文(Block Fromating Context)

其实css格式化上下文概念中除了BFC(块级格式化上下文), 还有：IFC(行内格式化上下文) , GFC(网格布局格式化上下文), FFC(自适应格式化上下文)。

BFC的特点

1. 同一个BFC区域中margin 会发生重叠，距离取最大margin距离
2. BFC区域中的元素会垂直的方向，一个接一个的放置。
3. BFC区域中如果有浮动元素，那么计算BFC高度时，也会算上浮动元素的高度
4. BFC区域中, 每个盒子的左外边界挨着包含块的左边界 (对于从右到左的格式化, 则为右边界互相挨着)。
5. BFC的区域不会与float元素重叠
6. 每个BFC之间是相互独立的块域（独立容器），里边的子元素不会相互影响

BFC触发情况

一般下面的情下，会触发(或形成)BFC

• 给元素设置float，但是值不为none
• 给元素设置overflow,但是值不为visibility
• 设置display的值为 inline-block、table-cell、table-caption、flex、inline-flex
• 设置position的值为 absolute 或 fixed

BFC的作用

知道了BFC的特点，以及触发条件，我们来看看, BFC在实际应用中有什么作用

解决margin重合问题

我们经常遇到margin重叠问题，在同一个BFC区域中margin 会发生重叠，为了不让margin 重叠我们可以创建两个BFC区域，将有margin的元素分别放到两个BFC区域中，因为两个BFC区域是相互不受影响的。

清楚浮动问题

我们给One div 进行浮动后，其父元素的到高度就不会被One撑开，受到浮动的影响，底部DIV元素 就会受影响，往上移动，

然后我们给父Div 加上display: inline-block; 变成一个BFC，这时就会清除浮动，也是因为每个BFC之间是相互独立的块域（独立容器），里边的子元素不会相互影响

自适应两栏布局

我们看下面布局，当One div元素浮动，而Two div 元素不浮动时，就会出现，Two 元素在One 元素下面，但是文字（不会在下面）会围绕One元素

为了让One元素和Two元素左右并排，我们可以将Two元素变成BFC，这是利用了BFC的区域不会与float元素重叠的特点

---

参考文献 👈

• MDN-块格式化上下文 (opens new window)
• CSS-BFC (opens new window)