干货｜一文读懂BFC: 破译布局黑科技，化解前端难题

2023-06-10 06:45:16

BFC：前端布局的秘密武器

嘿，前端开发爱好者们，让我们来揭秘一个鲜为人知的魔法工具——BFC！它绝对是掌控网页布局的神器，能帮你轻而易举地解决那些让你抓耳挠腮的难题。

BFC 的全称是 Block Formatting Context，也就是块级格式化上下文。想象一下它是一个独立的容器，里面装满了各种元素，但这些元素却与外部世界隔绝，不受任何外来势力的干扰。

BFC 的魔法就在于它能隔离元素的布局行为。一旦进入 BFC，元素们就成为自己的小天地，只顾自己的事情，互不影响。这让你可以轻松地解决各种布局难题，比如元素重叠、包含、塌陷和覆盖。

要召唤出 BFC，可以使用以下咒语：

让元素飘起来：float: left; 或 float: right;
隐藏元素的溢出：overflow: hidden; 或 overflow: scroll;
使用特殊显示模式：display: inline-block;、display: table;、display: table-cell; 或 display: flex;
让元素固定或绝对定位：position: absolute; 或 position: fixed;

BFC 是解决常见布局难题的超级英雄：

1. 元素重叠：
当两个元素重叠时，把它们放到不同的 BFC 里，它们就会各安其命，再也不重叠了。

2. 元素包含：
当父元素无法容纳它的子元素时，将父元素设置为 BFC，父元素就会自动扩大，完美地包含所有子元素。

3. 元素塌陷：
当浮动元素导致父元素塌陷时，把浮动元素放入 BFC 中，父元素就会保持原样，塌陷危机解除！

4. 元素覆盖：
当浮动元素覆盖其他元素时，让浮动元素待在 BFC 里，其他元素就会乖乖躲开，再也不被覆盖了。

掌握 BFC 的概念和用法，你就能成为前端布局界的超级魔法师，轻松搞定各种复杂的布局，让你的网页设计美观又实用。

常见的 BFC 疑难杂症

1. 什么元素会触发 BFC？

飘逸的元素（float: left; 或 float: right;)
隐秘的元素（overflow: hidden; 或 overflow: scroll;)
特立独行的元素（display: inline-block;、display: table;、display: table-cell; 或 display: flex;)
自由飞翔的元素（position: absolute; 或 position: fixed;)