页面两栏布局时，一般用float来实现，但也可以使用另一种方法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局编程</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:40px;background:grey;} .main{height:300px;background:red;position:relative;} .left{ position:absolute;left:0;top:0;width:200px;bottom:0;background:blue;} .right{background:green;margin-left:210px;height:300px} .foot{height:40px;background:orange;clear:both;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>