BFC块级格式化上下文简述

做过页面编写的各位应该对定位不陌生了，这个样式表中的重头戏，也是最难把控的元素之一，今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素，对于定位有很多种，有绝对定位，还有相对定位，固定定位，静态定位，对于这几种耳熟能详的定位在这里我们不必花费时间去讨论，我们今天要关注的是另一种神奇的定位，也就是所谓的bfc，对于前面几个定位，都会或多或少产生一些后遗症，影响它的兄弟元素的位置和父元素产生高度塌陷，这个不仅会影响内部的元素，还会对外部的元素产生影响，经常会弄得很头疼，往往为了移动某一个很小的元素，就得影响整个div甚至页面板块的布局，试想一下有没有一种方法能够让我们把一些元素放在一个div中包裹起来，在接下来的布局中使得这个被包裹着的块不受外界的影响，也不会影响外面的元素呢？在这里我们的bfc就能实现这个功能，下面我就细说这个神奇的东西。

对于上面谈到的因为定位而产生的后遗症，我们也有相应的解决方法，但是就比较复杂，也存在诸多的不确定因素，导致我们在布局中出现这样那样的问题，说起清除浮动，大家肯定会想起 clear: both ，的确，这是 CSS 中清除浮动的属性，clear 有 both/left/right/none/inherit 几个属性值，分别代表在元素左右两侧不允许出现浮动元素/左侧不允许出现浮动元素/右侧不允许出现浮动元素/不清除浮动/继承父元素的值。

还有一个经典的方法就是使用空div的方法，起到一个占位符的作用，这个方法虽然能够解决存在的问题，但是在一定情况下也影响了代码的质量，使得代码的可读性下降，这违背了结构与表现分离的原则，还有就是overflow的方法，在浮动元素的父元素上设置了 overflow 的值为 hidden 或 auto ，可以闭合浮动。另外在 IE6 中还需要触发 hasLayout ，在这里对于haslayout暂且不提，我们将在下一篇中专门讲到，这个方法相对前者更加方便，也更加符合语义要求，只是 overflow 并不是为了闭合浮动而设计的，因此当元素内包含会超出父元素边界的子元素时，可能会覆盖掉有用的子元素，或是产生了多余的滚动条。这也是在 overflow 方法诞生后依然需要寻找更佳方法的原因。看来我们还是得继续寻找新的适合的方法，对于有些资料上提到了使用为元素：after 在这里我们不进行深讲。

接下来我们就进入正题，来解开bfc的真实面纱，首先明确一个概念那就是bfc的含义，BFC (Block Formatting Contexts) 即块级格式化上下文，从样式上看，它与普通的容器没有什么区别，但是从功能上，BFC 可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素，上面的第二类方法（如 overflow 方法）就是触发了父元素的 BFC ，使到它可以包含浮动元素，从而防止出现高度塌陷的问题。看来这神器还真满足了我们之前谈到的各个问题，这个bfc都能为我们完美解决。

既然提到了bfc，那我们就会在页面中进行使用，接触过javascript原生代码的都清楚我们js中的事件模型，首先要发生某个响应，我们就得触发相应的事件，调用事件处理程序来进行处理，在css中也是一样，既然要使用bfc，我们还是需要对其进行触发，下面就是常见的触发该事件的方法：

触发 BFC 的条件如下：

• 浮动元素，float 除 none 以外的值
• 绝对定位元素，position（absolute，fixed）
• display 为以下其中之一的值 inline-blocks，table-cells，table-captions
• overflow 除了 visible 以外的值（hidden，auto，scroll）

在 CSS3 中，BFC 叫做 Flow Root，并增加了一些触发条件：

• display 的 table-caption 值
• position 的 fixed 值，其实 fixed 是 absolute 的一个子类，因此在 CSS2.1 中使用这个值也会触发 BFC ，只是在 CSS3 中更加明确了这一点。

　　既然触发了bfc，我们还是得看它是如何的工作的，那这就需要明确bfc的几个基本特性，

　　首先就是BFC 会阻止外边距折叠，就是在我们平常的布局中，、两个相邻的div或者块级元素的边距会重合在一起，这一点在使用bfc的时候就不会出现，因为它会组织外边距的重叠。

　　然后就是BFC 可以包含浮动的元素，主要体现在bfc会自动适应其中所包含的子元素的变化，这一点非常酷，它会随着子元素的大小改变而改变，

　　最后一点就是 BFC 可以阻止元素被浮动元素覆盖主要体现在：当浮动元素的块状兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，以上三点就是bfc的三个基本特征，关于bfc的基础知识就介绍到这里为止，更多更深的知识是需要在实践中去感知的。