CSS之BFC(Block Formatting Context)

以前我也不知道BFC是什么，今天看了才知道原来以前经常接触，只是不知道专业名称罢了。就像闭包、继承一样，以前经常用到，只是不知道而已，今天我就来说一下，css定位之BFC。

BFC与清除浮动是有关系的，那我们就来说说，如何清除浮动，清除浮动主要有两种方法：

①利用 clear属性，清除浮动

②使父容器形成BFC

在讲BCF之前，我要先说一下，我们通常控制元素布局的定位方案主要有3种：普通流 (Normal Flow) 、浮动 (Floats) 和绝对定位 (Absolute Positioning)

***普通流(Normal Flow)

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行， 除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

***浮动 (Floats)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移。

***绝对定位 (Absolute Positioning)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响（而浮动素会影响兄弟元素），而元素具体的位置由绝对定位的坐标决定。

BFC 正是属于普通流的，因此它对兄弟元素也不会造成什么影响。

&&--BFC的定义--&&

在进行盒子元素布局的时候， BFC 提供了一个环境， 在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成 BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也就是说，如果一个元素符合了成为 BFC 的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)， 是一个隔离了的独立容器。

&&--BFC到底是什么--&&

当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。

&&--怎样才能形成BFC--&&

①float的值不为none。

②overflow的值不为visible。

③display的值为table-cell, table-caption, inline-block中的任何一个。

④position的值不为relative和static。

⑤css3中flex boxes

&&--BFC的作用--&&

①包含浮动元素(清除浮动)

BFC 会 根据子元素的情况自 适应 高度 ，这个 特性 是 对父元素 使 用overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的

②不被浮动元素覆盖
浮动元素会无视兄弟元素的存在， 覆盖在兄弟元素的上面， 为该兄弟元素创建BFC 后可以阻止这种情况的出现

&&--BFC主要有三个特性--&&

①BFC 会阻止外边距折叠
两个相连的 p 在垂直上的外边距会发生叠加，在实际开发中，或许我们有时会不需要这种折叠，这时可以利用 BFC 的其中一个特性——阻止外边距叠加。阻止父子元素的 margin 折叠，仅当两个块级元素毗邻并且在同一个块级格式化上下文时，它们垂直方向之间的外边距才会叠加。也就是说，即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。同时BFC 的元素，不和它的子元素发生外边距折叠。

②BFC 可以包含浮动的元素
这也正是上面使用 overflow: hidden 与 overflow: auto 方法闭合浮动的原理，使用 overflow: hidden 或 overflow: auto 触发浮动元素父元素的 BFC 特性，从而可以包含浮动元素，闭合浮动。

W3C 的原文是“’Auto’ heights for block formatting context roots”，也就是 BFC 会根据子元素的情况自动适应高度，即使其子元素中包括浮动元素。

但是 IE6-7 并不支持 W3C 的 BFC ，而是使用自产的 hasLayout 。从表现上来说，它跟 BFC 很相似，只是 hasLayout 自身存在很多问题，导致了 IE6-7 中一系列的 bug 。触发 hasLayout 的条件与触发 BFC 有些相似，具体情况 Kayo 会另写文章介绍。这里 Kayo 推荐为元素设置 IE 特有的 CSS 属性 zoom: 1 触发 hasLayout ，zoom 用于设置或检索元素的缩放比例，值为“1”即使用元素的实际尺寸，使用 zoom: 1 既可以触发 hasLayout 又不会对元素造成其他影响，相对来说会更为方便。

③BFC 可以阻止元素被浮动元素覆盖
如上面所说，浮动元素的块状兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发 BFC 后可以阻止这种情况的发生。

更多CSS之BFC(Block Formatting Context) 相关文章请关注PHP中文网！