【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：会在前一列填充完以后的后面占据所剩余的空间。

 原文：http://www.javashuo.com/article/p-xrqqqsyy-g.html