<!DOCTYPE?html?>
<html>
<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{?width:960px;margin:0?auto;height:100px;background:#F90}
.main{?width:960px;margin:0?auto;border:5px?solid?red;}
.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">清楚看到mian撐開(kāi)
????<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.上面的代碼沒(méi)有給main設(shè)置高度時(shí)，而main沒(méi)有內(nèi)容或子元素又設(shè)置成了浮動(dòng)，footer會(huì)跑到head的下面。? ? 2.當(dāng)給 main中添加內(nèi)容時(shí)，如“清楚看到mian撐開(kāi)”，看到了塌陷的父元素main被撐開(kāi)了。? ? 3.在footer類(lèi)中添加? clear:both;看到footer回到底部；當(dāng)添加的是clear：left時(shí)，沒(méi)有變化，當(dāng)添加的是clear：right時(shí)，底部向上挪動(dòng)了內(nèi)容“楚看到mian撐開(kāi)”的高度。問(wèn)題：如何理解浮動(dòng)？top,main,footer是并列元素，footer受main的影響，但是main的子元素left和right是如何影響footer的？? ??clear：left和clear：right的結(jié)果不一樣，footer是如何受到影響的？是只有? r_sub_right? 嗎？
4 回答
陽(yáng)火鍋
TA貢獻(xiàn)16條經(jīng)驗(yàn) 獲得超2個(gè)贊
不知道是你思維混亂，還是我功力不夠理解不了你的意思。。
試著回答一下你的問(wèn)題：1，main有內(nèi)容就要設(shè)置高度，不要靠?jī)?nèi)容去撐。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2，你看到的main撐開(kāi)是你加了一個(gè)5px的邊框線。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3，你想讓footer回到底部就給main加個(gè)高度就可以了。
我覺(jué)得這東西先達(dá)到效果再去理解比較重要。。反正這里不行就改那里，總會(huì)碰中一兩個(gè)。。碰著碰著就理解了。。你不要寄希望于某一個(gè)人來(lái)用文字開(kāi)拓你。。自己動(dòng)手，因?yàn)楫吘笴SS還是比較簡(jiǎn)單的。。我排版div的時(shí)候每個(gè)div都加一個(gè)border邊框。這樣比較直觀。。然后我也是才學(xué)1個(gè)月的新手。。
-
AllySu有道理，坑都是時(shí)間和精力填平的
添加回答
舉報(bào)
0/150
提交
取消