BFC应用

标签：

块级格式化上下文（Block Formatting Context）是网页CSS视觉渲染的一部分，并用于决定块盒子的布局。在定位体系（Positioning Scheme）中它属于常规流（Normal Flow）。
浮动、绝对定位元素（position 为 absolute 或 fixed）、行内块元素 display:inline-block、表格单元格display:table-cell、表格标题 display:table-caption 以及 overflow 属性值不为 visible 的元素都将创建一个新的块级格式化上下文。
一个BFC就是一个HTML盒子，它至少满足以下条件之一：

• 根元素或其它包含它的元素；
• 浮动 (元素的float不为none)；
• 绝对定位元素 (元素的position为absolute或fixed)；
• 行内块inline-blocks(元素的 display: inline-block)；
• 表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
• overflow的值不为visible的元素；
• 弹性盒 flex boxes (元素的display: flex或inline-flex)；

最常见的是: overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了。
在一个块级格式化上下文中，盒子在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由’margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并，水平方向上margin不合并。

创建一个块级格式化上下文

一个BFC可以显式触发。如果我们想创建之，我们只需给它添加上面提到的任何一个CSS样式。
一个新的BFC可以通过给容器添加任意一个必要的CSS样式来创建，比如overflow: scroll，overflow: hidden，display: flex，float: left，或 display: table。尽管上述条件都可以创建BFC，但也会产生一些其他效果，如：

• display: table 可能引发响应性问题
• overflow: scroll 可能产生多余的滚动条
• float: left 将把元素移至左侧，并被其他元素环绕
• overflow: hidden 将裁切溢出元素
  所以无论何时，当要创建一个BFC时，我们要基于需求选择最恰当的样式。

BFC中盒子的对齐

W3C规范中讲到：在BFC上下文中，每个盒子的左外侧紧贴包含块的左侧（从右到左的格式里，则为盒子右外侧紧贴包含块右侧），甚至有浮动也是如此 （尽管盒子里的行盒子 Line Box 可能由于浮动而变窄），除非盒子创建了一个新的BFC（在这种情况下盒子本身可能由于浮动而变窄）。

BFC应用

清除浮动

在这以前，知道给父元素设置overflow:hidden可以清除子元素的浮动，但是不知道原理是什么。现在学习了BFC后，理解了其原理：当在父元素中设置overflow:hidden时就会触发BFC，所以他内部的元素就不会影响外面的布局，BFC就把浮动的子元素高度当做了自己内部的高度去处理溢出，所以外面看起来是清除了浮动。

BFC应用

标签：

原文地址：http://www.cnblogs.com/GGj147258/p/5697013.html