如何创建BFC?

给父级元素添加以下任意样式

• overflow: hidden;
• display: flex;
• display: inline-flex;
• display: inline-block;
• position: absolute;
• position: fixed;
  Tip：记住这几个常用的就可以了。

什么是BFC?

BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。

BFC有什么特性？

• BFC是一个块级元素，块级元素在垂直方向上依次排列。
• BFC是一个独立的容器，内部元素不会影响容器外部的元素。
• 属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。
• 计算BFC高度时，浮动元素也要参与计算。