浮动元素与 BFC

CSS 的默认以 document flow 方式渲染元素，而 float 与 postion 属性可以改变这种状况。

CSS 中 float 属性的本意是实现文本绕排图片，不过实际使用中 float 常常用来创建多栏布局。float 最常出现的问题是父元素不再包含它（float 之后不再属于 document flow）。

解决方法 1：

为父元素添加 overflow: hidden，它能可靠地迫使父元素包含其浮动的子元素。

<section>
  <img src="images/tianfangye.png">
  <div class="clear_me"></div>
</section>

section {
  border:1px solid blue;
  overflow: hidden;
}
img {
  float: left;
}

解决方法 2：

同时浮动父元素。浮动父元素后，不论子元素是否浮动都会被包含。

<section>
  <img src="images/tianfangye.png">
  <div class="clear_me"></div>
</section>

section {
  border:1px solid blue;
  float: left;
}
img {
  float: left;
}

解决方法 3：

添加非浮动的清除元素。

<section>
  <img src="images/tianfangye.png">
  <div class="clear_me"></div>
</section>

section {
  border:1px solid blue;
}
img {
  float:left;
}
.clear_me {
  clear:left;
}

上面的方法添加了一个纯表现性元素，这种方法的一个变种是使用伪元素，即著名的 clearfix 方案。

<section class="clearfix">
  <img src="images/tianfangye.png">
  <div class="clear_me"></div>
</section>

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
section {
  border:1px solid blue;
}
img {
  float:left;
}
.clear_me {
  clear:left;
}

BFC 与浮动

解决方法 1 和 2 实际上是创建了 BFC（指 Block Formatting Contexts，作为块级元素格式化的上下文。相关概念还有 IFC，即 Inline Formatting Contexts，作为行内元素格式化的上下文），BFC 是一个隔离的渲染区域，这个区域有自己独特的布局方式，容器里面的子元素不会在布局上影响到外面的元素。一个元素符合一定条件，那么这个元素的区域就是 BFC（作为块级元素格式化的上下文）。

创建 BFC 的条件：

根元素或其它包含它的元素
浮动 (float 不为 none)
绝对定位元素 (position 为 absolute 或 fixed)
内联块 inline-blocks (display: inline-block)
表格单元格 (display: table-cell，表格单元格默认属性)
表格标题 (display: table-caption, 表格标题默认属性)
overflow 不为 visible
flex boxes (display: flex 或 inline-flex)

可见，浮动元素就是一种 BFC。

BFC 的特性

阻止外边距折叠
包含浮动的元素
不会绕排兄弟浮动元素

IE6、IE7 的私有属性：hasLayout

IE6、IE7 不支持 BFC，与之相对应的概念是 hasLayout，效果上类似 BFC，但并不相同，而那些不相同的部分基本就是现在所说的 IE6、IE7 在 CSS 方面的 bug。

hasLayout 是一个比较独立的内容，可以参考hasLayout综合。