<!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 關注
- 1680 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消