前言
谈谈你对BFC容器的理解，这在前端面试中，是一个非常容易被问到的问题，很多小伙伴也许了解BFC容器的规则，但是想完整的表述出来，还是需要一番思索。在这篇文章中，我会给大家分享从几个点来回答面试官这个问题。
正文
BFC容器是什么？
首先我们来看看官方的概念：
块级格式化上下文（Block Formatting Context，BFC）是指在HTML文档中的一个独立渲染区域，其中的块级元素会按照一定的规则进行布局和渲染。BFC具有一套特定的渲染规则，这些规则影响着BFC内部元素的布局和外部元素的交互。
这段话有点复杂，我用自己的话来概括一下，小伙伴们方便记忆：
BFC是块级格式化上下文，是页面中一个渲染区域，有一套属于自己的渲染规则
BFC容器的渲染规则
- BFC容器在计算高度时，浮动元素的高度也会计算在内：
- 当一个元素形成了BFC，它会包含在BFC内部的所有内容，包括浮动元素。这意味着，如果一个元素触发了BFC，它的高度计算将考虑到内部浮动元素的高度。这种特性是BFC解决浮动引起的父元素塌陷的一种方式。因此，BFC容器内部的浮动元素不会导致父元素的高度塌陷为0。
- BFC容器内的子元素的margin-top不会和BFC这个父容器发生重叠：
- 在BFC中，相邻块级元素的垂直外边距（margin）不会发生重叠。这意味着，BFC容器内部的子元素的上外边距不会与其父容器的边框发生重叠，也不会与同级其他元素的上外边距发生重叠。这有助于保持布局的清晰性和可预测性。
- 遵照从上往下从左往右的布局排列：
- 在BFC中，内部的块级元素会按照文档流的顺序从上往下、从左往右进行布局排列。这意味着，BFC内部的块级元素不会随意漂浮或重叠，它们会按照其在HTML文档中出现的顺序依次排列，从左到右，从上到下。
以上三点是BFC容器的渲染规则，在面试时小伙伴们只需给面试官回答加粗的文字就行了。
触发条件
- position属性：元素的position属性值为absolute或fixed。
- overflow属性：元素的overflow属性值不为visible。
- display属性：元素的display属性值为inline-block、table-cell、table-caption、flex、inline-flex。
- float属性: 元素的float不为none
应用
清除浮动：
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { border: 1px solid black; overflow: hidden; /* 触发 BFC */ } .float-box { float: left; width: 100px; height: 100px; background-color: red; margin-right: 10px; } </style> </head> <body> <div class="container"> <div class="float-box"></div> <div class="float-box"></div> <div class="float-box"></div> </div> </body> </html>
在这个例子中，.container 的 overflow 属性被设置为 hidden，触发了它的BFC特性，使得它可以包含内部浮动的子元素，并且能够正常计算高度，从而防止父元素的高度塌陷。
对浮动属性不太了解的小伙伴们可以翻翻我前面的文章。
