float——浮动布局：
使用浮动，先渲染左右两个元素，分别让他们左右浮动，然后再渲染中间元素，设置它的margin左右边距分别为左右两个元素的宽度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="300px; float:left; background:#6FF">左侧的内容 固定宽度</div> <div style="200px; float:right; background-color:#960">右侧的内容 固定宽度</div> <div style="margin-left:300px;margin-right:200px; background-color:#9F3;">中间内容，自适应宽度</div> </body> </html>
position——定位：
使用定位方式，不需要先渲染中间元素，只要把左右两个元素分别使用定位，left:0;right:0;中间元素设置margin左右边距为左右两个元素的宽度即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .left{ width:200px; height:500px; position: absolute; top:0; left:0; background:blue; } .center{ margin-left: 200px; margin-right: 300px; height:500px; background-color: green; } .right{ width:300px; height:500px; position: absolute;; top:0; right:0; background: blue; } </style> </head> <body> <div class="left">左边</div> <div class="center">中间</div> <div class="right">右边</div> </body> </html>
双飞翼布局：
与其他方式不同，它最先渲染的是中间元素，然后才渲染两边元素（注意，这一点与float布局方式正好相反哟），先将三个元素都设置为向左浮动，然后使用负边距将左右两个元素覆盖到中间元素的左右两边，形成羽翼。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .middle{ float: left; width: 100%; height: 50px; background-color: #fff9ca; } .middle-wrap{ margin: 0 200px 0 150px; } .left{ float: left; width: 150px; height: 50px; background-color: red; margin-left: -100%; /*负边距的作用就是让左边div盖在中间div上面*/ } .right{ float: left; width: 200px; height: 50px; background-color: yellow; margin-left: -200px; /*让右边的div覆盖在中间的div右边*/ } </style> </head> <body> <div class="middle"> <div class="middle-wrap">middle</div> </div> <div class="left">left</div> <div class="right">right</div> </body> </html>
原文：http://www.cnblogs.com/pwei/archive/2016/04/01/css-layout.html