<html> <head> <title>Float浮动布局 </title> <style> div{ width:100px; height:100px; } #headeer{ width:40px; height:40px; background:red; float:left } #main{ width:40px; height:40px; background:yellow; float:right; } #footer{ width:40px; height:40px; background:green; float:left; margin-top:20px; } #comm{ width:40px; height:40px; background:black; margin-top:20px; float:right; } </style> </head> <body> <div> <div id="headeer">我是左上</div> <div id="main">我是右上</div> <div id="footer">我是左下</div> <div id="comm">我是右下</div> </div> </body> </html>
原文：http://www.cnblogs.com/bingg/p/5402745.html