如果對foot做clear：both會怎么樣？

另外一種方法，對right做float：right，然后對后面foot做clear：both得到的效果感覺差不多，但是mainbody顏色自己換了。這是為什么？

qq_PureBLACK_13313525

2016-05-09

源自：網頁布局基礎 3-5

關注問題我要回答

662

操作

收起

3 回答

Silily
2016-06-11

藍色是wrap的背景色，對footer使用clear:both;清除了上面right的浮動，但是left和right浮動之后脫離文檔流，無法撐起mianbody，所以看不到mianbody的背景色，之間顯示出了wrap的背景色

0 回復有任何疑惑可以回復我~

收起回答

C0EEC3F7BBAA

一語點透啊··想了這半天為啥left和right都float之后黃色的mainbody就變成wrap的藍色了··原來脫離文檔流mainbody就縮縮看不見了··哈哈

2016-07-06 回復有任何疑惑可以回復我~

vaneX
2016-05-09

<!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?type="text/css">
??*{
	margin:0px;
	padding:0px;
??}
??.floatleft{
??	float:left;
??}
??.floatright{
??	float:right;
??}
??.floatclear{
??	clear:both;
??}
??#warp{
	background:#CCC;
	width:960px;
	margin:0px?auto;
??}
??#header{
??	background:red;
??}
??#mainbody{
??	background:green;
??}
??#footer{
??	background:pink;
	text-align:center;
??}
??.box{
	background:yellow;
??}
</style>
</head>

<body>
<div?id="warp">
??<div?id="header">頭部</div>
??<div?id="mainbody">
??	<div?class="box?floatleft">
??????left
????</div>
??	<div?class="box?floatright">
??????right
????</div>
??</div>
??<div?class="floatclear"></div>
??<div?id="footer">版權部分</div>
</div>
</body>
</html>

0 回復有任何疑惑可以回復我~

收起回答

vaneX

不知道這樣寫和老師的寫法哪個好

2016-05-09 回復有任何疑惑可以回復我~