浮动布局：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <header>header</header> 10 <aside>aside</aside> 11 <section>section</section> 12 <footer>footer</footer> 13 </body> 14 </html>
*{ margin:0; padding: 0; } header{ height: 100px; background:rgba(10,180,10,0.5); } aside{ width: 30%; height:450px; background:rgba(180,10,10,0.5); float: left; border:1px solid blue;/*aside的width加上section的width等于100%，此句会多出2px宽，影响正常布局。*/ box-sizing: border-box;/*content-box总宽不包括外边框。border-box总宽包括外边框，可以解决上面那个问题。*/ } section{ width: 70%; height: 450px; background:rgba(10,10,180,0.5); float: left; } footer{ height: 100px; background:pink; clear: left; }
原文：http://www.cnblogs.com/xiongjiawei/p/6791796.html