wshy-docsBFC
BFC，即块级格式化上下文（Block Formatting Context），是Web页面的可视CSS渲染的一部分，用于决定块级盒子的布局及浮动元素的交互规则。
创建BFC的条件
BFC可以通过以下方式之一创建：
- 根元素（
<html>）自然形成一个BFC。 - 浮动元素（元素的
float不是none）。 - 绝对定位元素（元素的
position为absolute或fixed）。 display为inline-block、table-cells、flex。overflow的值不为visible的块元素。
BFC的特性和用途
BFC具有以下特性和用途：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由
margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 - **BFC的区域不会与float box重叠。**这个特性常用于清除元素的浮动，防止高度塌陷。
- **计算BFC的高度时，浮动元素也参与计算。**这意味着BFC可以包含浮动的元素（浮动元素不会脱离BFC的“边界”）。
- **BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。**因此，使用BFC可以用于创建相互独立的布局区域。
应用场景举例
- 防止
margin重叠：相邻的块级元素垂直排列时，它们之间的margin可能会重叠。通过将其中一个元素放入BFC中，可以避免这种重叠。 - 清除浮动：在浮动元素后面创建BFC可以包含浮动元素，防止父元素高度塌陷。
- 制作侧边栏：利用BFC不与浮动元素重叠的特性，可以制作内容与侧边栏布局。
BFC提供了一种HTML元素布局、定位及清除浮动的高级机制，是掌握CSS布局的重要概念之一。