【HTML/CSS】BFC

块格式化上下文（Block formatting contexts）

BFC是什么？

是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。

至少满足条件之一：

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

创建时可能会出现的问题：

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

BFC可以用来做什么？

两个不同的BFC可以防止正常margin外边距折叠

包含浮动：当容器内有元素浮动时，容器没有设置高度，容器内的浮动子元素会脱离页面文档流；除了定义伪类clearfix还可以设置BFC

防止图片周围文字环绕

多列布局中使用BFC：会在前一列填充完之后的后面占据所剩余的空间。

【HTML/CSS】BFC

原文地址：https://www.cnblogs.com/CarrotHu/p/10332250.html