两栏布局
方法一：浮动布局
<style>
div{
height:500px;
}
#aside{
width:300px;
background-color:yellow;
float:left;
}
#main{
background-color:aqua;
margin-left:300px;
}
</style>
<body>
<div id = "aside">
</div>
<div id = "main">
</div>
</body>
左侧栏固定宽度向左浮动，右侧主要内容则用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 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;
}
这种方法的好处就是主体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;
}
方法四：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;
}
方法五： 圣杯布局
双飞翼布局的前身。
<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空出来的位置。
