是BFC不是KFC昨天写代码的时候遇到这样一个问题，我的“北京”怎么飘了？最后还是overflow的BFC救我狗命，接

昨天写代码的时候遇到这样一个问题，我的“北京”怎么飘了？

屏幕截图 2024-12-24 115227.png

最后还是overflow的BFC救我狗命，接下来本文将详细介绍一下什么是BFC（不是KFC）

屏幕截图 2024-12-24 115059.png

1. 什么是BFC？

块格式化上下文（Block Formatting Context，简称BFC）是Web页面中一个独立的渲染区域。在这个区域内，块级盒子的布局仅受该区域内元素的影响。BFC确保了外部元素不会干扰这个独立区域内的元素布局，并且内部的元素也不会影响到外部的元素。

要创建一个新的BFC，可以通过以下几种方式之一来实现：

根元素 (<html>)
浮动元素 (float 的值不为 none)
绝对定位元素 (position 的值为 absolute 或 fixed)
行内块元素 (display 的值为 inline-block)
表格单元格 (display 的值为 table-cell)
表格标题 (display 的值为 table-caption)
匿名表格盒子 (display 的值为 table, table-row, table-header-group, table-footer-group, table-row-group, table-column, table-column-group)
具有 overflow 值不为 visible 的元素
弹性盒子 (display 的值为 flex 或 inline-flex)
网格容器 (display 的值为 grid 或 inline-grid)
column-count 或 column-width 不为 auto 的多列容器
writing-mode 不为 horizontal-tb 的元素

清除浮动：当一个父元素中包含浮动子元素时，如果不给父元素设置高度，父元素的高度将塌陷，即不会根据子元素的高度自动调整。通过将父元素转换为BFC（例如，设置 overflow: hidden;），可以解决这个问题，因为BFC会包含其内部的所有浮动元素。
```
.clearfix {
    overflow: hidden;
}
```
避免外边距折叠：当两个相邻的块级元素之间发生外边距折叠时，它们之间的间距不是各自外边距之和，而是取较大者。为了阻止这种情况，可以让其中一个元素成为BFC的一部分。
```
.no-margin-collapse {
    overflow: hidden;
}
```
防止溢出：如果你有一个相对定位的父元素和绝对定位的子元素，而你希望子元素不要超出父元素的边界，你可以让父元素形成BFC，这将确保子元素不会溢出父元素。
```
.prevent-overflow {
    position: relative;
    overflow: hidden;
}
```

理解BFC对于掌握CSS布局至关重要，尤其是在处理复杂的网页设计时。不然下一个飘起来的可就不只是“北京”了嘿嘿。

最后祝大家平安夜快乐，喜欢本文的就点个赞吧，感谢支持