<!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; 【任務(wù)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; 【任務(wù)3】}.footer{ height:50px; background:#9F9; 【任務(wù)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貢獻(xiàn)123條經(jīng)驗(yàn) 獲得超103個(gè)贊
任務(wù)2 ： float: left;
任務(wù)3 ：?float: left;
任務(wù)4 ：clear: both;
footer是沒(méi)有浮動(dòng)，清除浮動(dòng)實(shí)際上是清除浮動(dòng)對(duì)它的影響。
浮動(dòng)元素默認(rèn)是不占空間的，上面的left right 都浮動(dòng)起來(lái)了，
這個(gè)時(shí)候下面的footer就會(huì)擠到上面浮動(dòng)元素的底下，
那么clear:both 就是清除上面元素浮動(dòng)對(duì)他的影響，讓它自己呆在標(biāo)準(zhǔn)流的位置。
添加回答
舉報(bào)
0/150
提交
取消