一列布局
居中显示：margin:0 auto;
二列布局
float:left; float:right;
脱离文档流：float和position：absolute;relative不能
三列布局
左边和右边固定，中间自适应：
.left{200px;height:500pxbackground:#ccc;position:absolute;left:0;top:0;}
.middle{height:500pxbackground:#999;margin:0 300px 0 200px}
.right{300px;height:500pxbackground:#ddd;position:absolute;right:0;top:0;}
混合布局
<style> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .top{ height:100px;background:#9CF} .head,.main{ width:960px; margin:0 auto;} .head{ height:100px; background:#F90} .left{ width:220px; height:600px; background:#ccc; float:left;} .right{ width:740px; height:600px;background:#FCC; float:right;} .r_sub_left{ width:540px; height:600px; background:#9C3; float:left;} .r_sub_right{ width:200px; height:600px; background:#9FC; float:right;} .footer{ height:50px; background:#9F9; clear:both;} </style> </head> <body> <div class="top"> <div class="head">head</div> </div> <div class="main"> <div class="left">left</div> <div class="right"> <div class="r_sub_left">sub_left </div> <div class=" r_sub_right">sub_right </div> </div> </div> <div class="footer">footer</div> </body>
清浮动：
1.如果是要清除浮动影响的是浮动对象的父对象：
建议采用：设置父对象的overflow:hidden;
2.如果要清除浮动影响的是浮动对象后边紧邻的对象
建议采用：clear:both;