<!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; 【任务2】}.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; 【任务3】}.footer{ height:50px; background:#9F9; 【任务4】}</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>
1 回答
已采纳
OlderSkee
TA贡献123条经验 获得超103个赞
任务2 ： float: left;
任务3 ： float: left;
任务4 ：clear: both;
footer是没有浮动，清除浮动实际上是清除浮动对它的影响。
浮动元素默认是不占空间的，上面的left right 都浮动起来了，
这个时候下面的footer就会挤到上面浮动元素的底下，
那么clear:both 就是清除上面元素浮动对他的影响，让它自己呆在标准流的位置。
- 1 回答
- 1 关注
- 1575 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消