CSS实现经典三栏布局（两侧定宽，中间自适应）

html代码:

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

css代码:

#left{
float: left;
width:100px;
height: 100px;
background-color: #00A5FF;
}
#right{
float: right;
width:100px;
height:100px;
background-color: #0000FF;
}
#middle{
overflow: hidden;
width:auto;
height:150px;
background-color: red;
}

中间元素要创建一个BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建：

float

的值不为

none

position

的值不为

static

或者

relative

display

的值为 

table-cell

, 

table-caption

, 

inline-block

, 

flex

, 或者 

inline-flex

中的其中一个

overflow

的值不为

visible

　　关于BFC，在w3c里是这样描述的：在BFC中，每个盒子的左外边框紧挨着包含块的左边框（从右到左的格式化时，则为右边框紧挨）。即使在浮动里也是这样的（尽管一个包含块的边框会因为浮动而萎缩），除非这个包含块的内部创建了一个新的BFC。这样，当我们给右侧的元素单独创建一个BFC时，它将不会紧贴在包含块的左边框，而是紧贴在左元素的右边框。