枫祺玥的小客栈

BFC 条件

一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个：

• float的值不为none
• position的值不为static或者relative
• display的值为 table-cell, table-caption, inline-* block, flex, 或者 inline-flex中的其中一个
• overflow的值不为visible

构建 BFC 方法

一个新的BFC可以通过给容器添加任何一个触发BFC的CSS样式，如overflow: scroll, overflow: hidden, display: flex, float: left,或者 display: table来创建。

• display:table可能会产生一些问题
• overflow:scroll可能会显示不必要的滚动条
• float:left将会把元素置于容器的左边，其他元素环绕着它
• overflow:hidden将会剪切掉溢出的元素

所以每当想要创建一个新的BFC的时候，我们会基于我们的需求选择最好的样式条件