1. 使用BFC的原理实现
BFC的规则之一，就是BFC区域，不会与float box重叠，因此我们可以利用这一点来实现3列布局。
html代码如下
XML/HTML Code复制内容到剪贴板 <divclass="left"></div> <divclass="right"></div> <divclass="main"></div> css代码如下
CSS Code复制内容到剪贴板 .left{ float:left; margin-right:10px; width:100px; height:100px; background-color:orange; } .rightright{ float:rightright; margin-left:10px; width:100px; height:100px; background-color:orange; } .main{ height:100px; background-color:green; overflow:hidden; } 2.双飞翼布局
这种布局方案最早由淘宝提出，主要为了主列能够被最先加载。
实现原理：
（1）让主列外面添加一个wrap，主列wrap，以及2子列都左浮动。
（2）设置主列wrap宽度为100%，将子列的margin-left设置为负值，让子列能够排列在左右两侧。
（3）这是主列的margin-left与margin-right比左右两列的宽度大一点，则可以设置出来主列与子列之间的间隙。
html代码如下
XML/HTML Code复制内容到剪贴板 <divclass="wrap"> <divclass="main-content"> <divclass="main"></div> </div> <divclass="left"></div> <divclass="right"></div> </div> css代码如下
CSS Code复制内容到剪贴板 .wrap{ width:100%; } .wrap::after{ display:block; content:''; font-size:0; height:0; clear:both; zoom:1; } .main-content{ float:left; width:100%; } .main{ height:100px; background-color:green; margin-left:110px; margin-right:110px; } .left{ float:left; width:100px; height:100px; background-color:orange; margin-left:-100%; } .rightright{ float:left; width:100px; height:100px; background-color:orange; margin-left:-100px; } 3.圣杯布局
圣杯布局在结构上要简单一点，也能够让主列优先加载。
实现原理：
（1）添加一个包裹框，设置padding-leftpadding-right值，比子列宽度大一个空隙的宽度。
（2）主列，子列都设置为float: left 左子列margin-left设置为-100%，并且设置为position:relative; left: -110px将左子列放置到左侧。右子列同理。
（3）主列只需设置宽度为100%即可。包裹框的宽度不要设置为100%，自适应即可。
html代码如下
XML/HTML Code复制内容到剪贴板 <divclass="wrapper"> <divclass="main"></div> <divclass="left"></div> <divclass="right"></div> </div> css代码如下
CSS Code复制内容到剪贴板 .wrapper{ padding-left:110px; padding-right:110px; overflow:hidden; } .main{ float:left; width:100%; height:100px; background-color:#ccc; } .left{ float:left; width:100px; height:100px; margin-left:-100%; position:relative; left:-110px; _left:0; background-color:orange; } .rightright{ float:left; width:100px; height:100px; background-color:orange; margin-left:-100px; position:relative; rightright:-110px; } 下面再给出一个高度占满全屏的例子：
CSS Code复制内容到剪贴板 <p><!DOCTYPEhtml> <htmlxmlns="<atarget="_blank"href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <headrunat="server"> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title></title> <styletype="text/css"> body,html{ margin:0px; } #header{ background:blue; height:100px; width:100%; position:relative;/*父div的位置设置成相对的*/ top:0; } #header#h_menu{ position:absolute; bottombottom:0; background:yellow; width:100%; height:50px; } #middle{ position:absolute; width:100%; height:auto; top:100px; bottombottom:50px; } .left{ width:15%;/*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/ background:red; float:left; height:100%; } .rightright{ width:15%;/*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/ height:100%; background:pink; float:rightright; } .center{ height:100%; background:green; /*两种方式均可（一）margin(二)margin-left、margin-right*/ /*（一）、用这种方式上面的left和right中的width是百分比或者像素值都可以*/ margin:auto; /*(二)、这里是百分比或者像素值，对应上面的left、right中的width就是百分比或者像素值*/ /*margin-left:15%; margin-right:15%;*/ } #footer{ background:blue; height:50px; width:100%; position:absolute; bottombottom:0; } </style> </head> <body> <formid="form1"runat="server"> <div> <divid="header"> 上 <divid="h_menu"> 上_底 </div> </div> <divid="middle"> <divclass="left"> 中左 </div> <divclass="right"> 中右 </div> <divclass="center"> 中间 </div> </div> <divid="footer"> 下 </div> </div> </form> </body> </html> </p>
【CSS实现页面两列布局与三列布局的方法示例】相关文章：
★ CSS布局入门