标签：
说到布局，无论网站多么复杂，都是以两列布局为基础。
基本的两列布局，和三列布局。三列布局只是在其中一列又分出一个两列布局。
这是基本的HTML骨架。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div class="header">这里是头部</div> 9 <div class="container"> 10 <div class="mainBox">主要内容</div> 11 <div class="sideBox">侧边栏</div> 12 </div> 13 <div class="footer">底边栏</div> 14 </body> 15 </html>
以下是CSS两列固定宽高布局
1 * 2 { 3 padding:0; 4 margin:0; 5 } 6 .header,.footer 7 { 8 width:960px; 9 height:30px; 10 background-color:red; 11 } 12 .container 13 { 14 width:960px; 15 height:250px; 16 margin:10px 0; 17 } 18 .mainBox 19 { 20 float:left; 21 width:680px; 22 height:250px; 23 background-color:#333; 24 color:#ffffff; 25 } 26 .sideBox 27 { 28 float:right; 29 width:270px; 30 height:250px; 31 color:#ffffff; 32 background-color:#999999; 33 }
--------------------------------------------------------------------------------------------------------------------------------------------------------
以下是自适应高度的css布局。只是把高度值给去掉。
对container进行一次清除浮动。如果不清除浮动，与footer之间设置的间距就会失效。
1 * 2 { 3 padding:0; 4 margin:0; 5 } 6 .header,.footer 7 { 8 width:960px; 9 height:30px; 10 background-color:red; 11 } 12 .container 13 { 14 width:960px; 15 margin:10px 0; 16 } 17 .mainBox 18 { 19 float:left; 20 width:680px; 21 background-color:#333; 22 color:#ffffff; 23 } 24 .sideBox 25 { 26 float:right; 27 width:270px; 28 color:#ffffff; 29 background-color:#999999; 30 } 31 .container:after 32 { 33 display:block; 34 clear:both; 35 content:""; 36 }
/*这是清除了内容的左右浮动*/
--------------------------------------------------------------------------------------------------------------------------------------------------------
宽度自适应，统一用百分比就ok。
1 * 2 { 3 padding:0; 4 margin:0; 5 } 6 .header,.footer 7 { 8 9 height:30px; 10 background-color:red; 11 } 12 .container 13 { 14 margin:10px 0; 15 } 16 .mainBox 17 { 18 float:left; 19 width:70%; 20 background-color:#333; 21 color:#ffffff; 22 } 23 .sideBox 24 { 25 float:right; 26 width:30%; 27 color:#ffffff; 28 background-color:#999999; 29 } 30 .container:after 31 { 32 display:block; 33 clear:both; 34 content:""; 35 } 36 .footer 37 { 38 clear:both; 39 }
/*清除浮动是为了不让footer乱跑*/
--------------------------------------------------------------------------------------------------------------------------------------------------------
两列等高布局，主要原理是负边距的应用
1 * 2 { 3 padding:0; 4 margin:0; 5 } 6 .header,.footer 7 { 8 9 height:30px; 10 background-color:red; 11 } 12 .container 13 { 14 margin:10px 0; 15 overflow:hidden; 16 } 17 .mainBox 18 { 19 float:left; 20 width:70%; 21 background-color:#333; 22 color:#ffffff; 23 } 24 .sideBox 25 { 26 float:right; 27 width:30%; 28 color:#ffffff; 29 background-color:#999999; 30 } 31 .mainBox,.sideBox 32 { 33 margin-bottom:-9999px; 34 padding-bottom:9999px; 35 }
/*这个部分是关键点*/ 36 .container:after 37 { 38 display:block; 39 clear:both; 40 content:""; 41 } 42 .footer 43 { 44 clear:both; 45 }
--------------------------------------------------------------------------------------------------------------------------------------------------------
也可以用js来判断高度，以此来达到两列等高的效果。
标签：
原文地址：http://www.cnblogs.com/treants/p/4923760.html
