BFC宽度自适应布局

BFC：块级格式化上下文，它指的是一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC的生成

（1）float的值不为none；

（2）overflowd的值不为visible；

（3）display的值为inline-block, table-cell, table-caption；

（4）position的值为absolute或fixed；

BFC的约束规则

（1）生成的BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。

（2）生成BFC元素的子元素中，每一个子元素的外边距和包含块的左边界相接处，（对于从右到左的格式化，右外边距和右边距相接触），除非这个子元素也创建了一个新的BFC（比如它自身也是一个浮动元素）。

有朋友对它做了分解，我们直接拿来：

（1）内部的BOX会在垂直方向上一个接一个的放置；

（2）垂直方向上的距离有margin决定。（完整的说法是：属于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关）

（3）每个元素的左外边距与包含块的左边距相接触（从左到右），即使浮动元素也是如此。（这说明BFCD子元素不会超出它的包含块，而position为absolute的元素可以超出它 包含块边界）；

（4）BFC的区域不会与float的元素区域重叠；

（5）计算BFC的高度时，浮动子元素也参与计算；

（6）BFC就是页面上的一个隔离的容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC两栏自适应布局

html代码：

<div class="left"></div>
<div class="right"></div>

css代码

.left{
  width:200px;
  height:200px;
  background:red;
  float:left;
}
.right{
  height:200px;
  background:green;
  overflow:hidden;
}

运行以上代码，伸缩页面宽度，可以发现的确是自适应

或者：

.right{
  height:200px;
  background:green;
  display:table-cell;
  width:9000px;//宽度大于显示屏
}

BFC三栏布局

<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>

css代码如下：

.left{
  width:200px;
  height:200px;
  float:left;
  background:red;
}
.right{
  width:200px;
  height:200px;
  float:right;
  background:green;
}
.middle{
  display:table-cell;
  width:9000px;
  *display:inline-block;
  *width:auto;
  height:200px;
  background:pink;
}

在这里*表示兼容IE6和IE7