<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ clear: both; *zoom:1; } body:after{ content: ‘‘; display: block; clear: both; visibility: hidden; height: 0px; } header{ width: 100%; height: 100px; border: 1px solid #666; float: left; margin-bottom: 60px; } footer{ width: 100%; height: 100px; border: 1px solid #666; margin-top: 100px; float: left; } section{ width: 80%; height: 300px; border: 1px solid #666; float: left; box-sizing: border-box; } aside{ width:20%; height: 300px; border: 1px solid #666; float: right; box-sizing: border-box; } </style> <script type="text/javascript" src="js/html5shiv.js"></script> </head> <body> <header>头部</header> <section>主体</section> <aside>侧边栏</aside> <footer>底部内容</footer> </body> </html>
原文：http://www.cnblogs.com/jinsuo/p/6956260.html