CSS：两栏布局，三栏布局

两栏布局

方法一：浮动布局

<div id = "aside">
</div>
<div id = "main">
</div>

div{
  height:500px;
}
#aside{
  width:300px;
  background-color:yellow;
  float:left;
}
#main{
  background-color:aqua;
  margin-left:300px;
}

左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。

右侧固定宽度，左侧自适应则是同理，只要将固定栏右浮动，使用margin-right空出其宽度即可。

#aside{
  width:300px;
  background-color:yellow;
  float:right;
}
#main{
  background-color:aqua;
  margin-right:300px;
}

方法二：浮动布局+负外边距（双飞翼布局的两栏版）

这种方法是创建简单一列宽度固定，一列内容为宽度的100%的两列布局的好方法：

<div id = "aside">
</div>
<div id = "main">
  <div id = "content"></div>
</div>

div{
  height:500px;
}
#aside{
  width:300px;
  background-color:yellow;
  float:left;
  margin-right:-100%;
}
#main{
  width:100%;
  float:left;
}
#content{
  margin-left:300px;
  background-color:aqua;
}

• 左侧固定栏指定一个右侧的100%的负外边距，为整个屏幕的宽度，这就使得main的最左侧可以与屏幕最左侧对齐。
• 此时main的宽度是100%，因此需要为其子内容content指定一个左侧的外边距用于空出左侧栏的位置，即左侧栏的宽度300px

这种方法要相对复杂一些，但也很常用。

绝对定位

<div id = "aside">
</div>
<div id = "main">
</div>

#aside{
    position:absolute;
    left:0;
    width:200px;
}
#main{
    margin-left:200px;
}

flex

<div id="container">
    <div id = "aside"></div>
    <div id = "main"></div>
</div>

#container{
    display:flex;
}
#aside{
    flex:0 0 200px;
}
#main{
    flex: 1 1;
}

三栏布局

方法一：绝对定位
左侧栏和右侧栏分别用绝对定位固定在左侧和右侧，中间栏则利用margin-left和margin-right空出左右栏位置来：

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

html,body{
  margin:0;
  padding:0;
  height:100%;
}
div{
  height:100%;
}
#left{
  width:200px;
  background-color:yellow;
  position:absolute;
  top:0;
  left:0;
}
#main{
  background-color:aqua;
  margin-left:200px;
  margin-right:300px;
}
#right{
  width:300px;
  background-color:orange;
  position:absolute;
  top:0;
  right:0;
}

这里的三个div的位置可以随意调整。

方法二：浮动+负外边距（双飞翼布局）
与两栏布局中的方法二中-100%外边距的使用有异曲同工之妙，注意理解。

• 三个栏都采用左浮动；
• 中间栏的div写在最前面，宽度为100%
• 左侧栏也是左浮动，默认情况下由于前面的中间栏div占据了100%，因此这个左侧栏是在中间栏下方一行的。为左侧栏设置margin-left:-100%，即整个屏幕的宽度100%，这就令左侧栏跑到了中间栏的最左侧。
• 右侧栏也是左浮动，此时默认情况下也是在中间栏下方一行的，同样利用margin-left:-300px，即其自身的宽度，使其到上一行最右侧的位置。
• 中间栏的内容部分则需要利用分别等于左右侧栏宽度的外边距来空出它们的位置。

<!--中间栏写在最前面-->
<div id = "main">
  <div id="content"></div>
</div>
<div id = "left">
</div>

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

html,body{
  margin:0;
  padding:0;
  height:100%;
}
div{
  height:100%;
}


#main{
  background-color:aqua;
  width:100%;
  float:left;
}
#left{
  width:200px;
  background-color:yellow;
  float:left;
  margin-left:-100%;
}

#right{
  width:300px;
  background-color:orange;
  float:left;
  margin-left:-300px;
}

#content{
  margin-left:200px;
  margin-right:300px;
}

在线DEMO
这种方法的好处就是主体main在前面，可以先加载主题内容。

方法三：浮动定位法
此种方法最简单，分别另左侧栏和右侧栏向左和向右浮动，中间栏放在最后，再利用左右外边距空出左右栏的位置即可。

<!--左右侧栏的位置可以更改-->
<div id="left"></div>
<div id="right"></div>
<!--中间栏放最后-->
<div id="main"></div>

*{
  margin:0;
  padding:0;
  height:100%;
}
#left{
  width:300px;
  background-color:yellow;
  float:left;
}
#right{
  width:200px;
  background-color:orange;
  float:right;
}
#main{
  background-color:aqua;
  margin-left:300px;
  margin-right:200px;
}

在线DEMO

方法四：flexbox

<div>
  <article></article>
  <nav></nav>
  <aside></aside>
</div>

div{
  display:-webkit-flex;
  display:flex;

  margin:0;
  padding:0;
  height:800px;
}
article{
  flex:1 1;
  order:2;  
  background-color:yellow;
}

nav{
  flex:0 0 200px;
  order:1;  
  background-color:blue;
}
aside{
  flex:0 0 200px;
  order:3;
  background-color:aqua;
}

在线DEMO

方法五： 圣杯布局
双飞翼布局的前身。

<div id="container">
  <div id="center" class="column">#center</div>
  <div id="left" class="column">#left</div>
  <div id="right" class="column">#right</div>
</div>

前面的实现都一样，三栏都向左浮动，center的宽度为100%，left的margin-left为-100%，right的margin-left为其自身宽度的负值。
但此时左右边栏实际上是在center上方的，会遮盖center内容。

此时为container设置一个左右的padding，分别为left和right的宽度。此时整体都是向中间压缩的：

然后对left与right使用position:relative，使其相对现在的位置分别向左、向右移动，从而占据container利用padding空出来的位置。