CSS布局——三栏布局

题外话：抓狂系列片之叁个我。

三栏布局要求说明：两边固定宽度，中间自适应，顶部对齐

HTML文档结构有三种（内层div顺序不同）：左右中、左中右。

实现效果：

方法如下：

1.左右中：对左右子元素使用了浮动属性（float），从而脱离了文档流，如果按照正常左中右的顺序，会导致右子元素出现在中间子元素的右下方。所以，浮动元素应该尽可能高的放置。

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

利用float属性，左子元素float设置为left，右子元素float设置为right，中间子元素设置margin-left为左子元素width，margin-right为右子元素width。（后附BFC说明）

.outer{
	overflow:hidden; /*生成BFC->将子元素中的浮动元素（float）的高度考虑进去*/
	background:#DCDCDC; /*灰*/
}
.left{
	width:200px;
	height:400px;
	float:left;
	background:#FF0000; /*红*/
}
.middle{
	height:100px; /*指定高度有效，设置百分比无效，若无此行，高度自适应*/
	margin-left:200px; /*左子元素宽度*/
	margin-right:300px; /*右子元素宽度*/
	background:#00FF00; /*绿*/
}
.right{
	width:300px;
	height:300px;
	float:right;
	background:#0000FF; /*蓝*/
}

2.左右中：利用position定位属性，父元素absolute，左右子元素absolute并分别设left为0，right为0，中间元素取margin-left和margin-right分别为做右子元素的宽度

.outer{
    position:relative;
    background:#DCDCDC; /*灰*/
}
.left{
    width:200px;
    height:400px;
    position:absolute;
    left:0;
    background:#FF0000; /*红*/
}
.middle{
    height:100%;
    margin-left:200px; /*左子元素宽度*/
    margin-right:300px; /*右子元素宽度*/
    background:#00FF00; /*绿*/
}
.right{
    width:300px;
    height:300px;
    position:absolute;
    right:0;
    background:#0000FF; /*蓝*/
}

3.左中右：设置属性display:flex （后附flex属性值说明）

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

设置父元素的display属性为flex，其内容两端对齐。指定子元素的高度以撑起容器，中间子元素宽度设置为100%。

.outer{
	display:flex;
	justify-content:space-between; /*子元素内容两端对齐*/
	background:#DCDCDC;
}
.left{
	width:200px;
	height:400px;
	background:#FF0000;
}
.middle{
	width:100%; /*宽度*/
	height:100px; 
	background:#00FF00;
}
.right{
	width:300px;
	height:300px;
	background:#0000FF;
}

附：

1.BFC（Block Formatting Context，块级格式化上下文）：简单来说，BFC决定了元素对其内容的定位，以及与其他元素的关系和相互作用。再简言之，BFC内部的元素和外部的元素不会相互影响。

能够触发BFC的条件：

• 浮动元素，float（不为none）
• 绝对定位元素，position（absolute，fixed）
• display（inline-block，table-cell，table-caption）
• overflow（不为visible）

2.display：flex

将元素设置为弹性布局，其子元素的float、clear和vertical-align均会失效