CSS 混合布局

来源：互联网发布：linux mount 原理编辑：程序博客网时间：2024/05/22 10:47

<!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>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;}</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></html>

上面的代码没有给main设置高度，而main里的内容又设置成了浮动，所以footer会跑到head的下面。
解决方法有4个：

一：clear:both(/left/right);
二：overflow:hidden;width:100%;在给footer使用overflow的时候，千万不要忘记设置它的宽度
三：给main设置高度：.main{width:960px; {height:600px};margin:0 auto;}
四：margin:600px 0 0 0;

0 0