学习BFC布局，轻松解决页面布局难题！

⚡️ 小编温馨提示：阅读前请先准备好一杯咖啡，否则代码的细节可能会让你手抖哦！

BFC到底是个什么玩意儿？

如果你曾经为浮动元素脱离文档流后导致父容器高度坍塌而抓狂， 那么恭喜你，你已经碰上了BFC的“魔法”。它是 CSS 中的一个独立排版环境 内部的盒子遵循自己的规则，却不把这些规则泄漏到外部，这东西...。

它决定了元素如何与其他元素在布局上进行交互——从根本上说 就是让我们能够控制外边距合并、清除浮动、实现自适应列宽等，嗯，就这么回事儿。。

触发 BFC 的八大条件

• float:not none
• position:absolute|fixed
• display:inline-block | table-cell | table-caption | flex | grid
• overflow:hidden|auto|scroll|clip
• #root

其中最常见的两招是：给父容器加上overflow:auto; 或者使用经典的clearfix 黑魔法。下面我们来实际演练，绝了...。