<html> <head> <title>Float浮动布局 </title> <style> div{ 100px; height:100px; } #headeer{ 40px; height:40px; background:red; float:left } #main{ 40px; height:40px; background:yellow; float:right; } #footer{ 40px; height:40px; background:green; float:left; margin-top:20px; } #comm{ 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>