我的中間部分為什么空了那么多空白
<!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">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{ height:100px; background:#ccc;}
.main{ background:#000;}
.left{ width:200px;height:600px;? background:blue;float:left;}
.right{ height:600px; background:green;float:right;margin-left:10px;}
.foot{ height:80px; background:yellow; clear:both;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
??? <div class="right">right</div>
??? <div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
2016-08-13
div加了float之后就不再是block,而是變成了inline-block,所以只有內容撐開的那么寬
2016-08-13
首先你要知道，DIV是一個塊級元素，當你不設定它的寬度時，會無限延遲寬度，你這行代碼，父級沒有設置寬度，設置的右浮動，默認無限向右邊了，如果想做出效果。建議跟著別人代碼做一遍。
2016-08-13
.right{ height:600px; background:green;float:right;margin-left:10px;} ?這是你的right 設置了float，一旦漂起來，寬度丟失，而且你也沒設置寬度，所以，里面內容有多寬，right就有多寬；你可以設置成position:absolute;再用right:0 來定位
2016-08-13
.right{ height:600px; background:green;float:right;margin-left:10px;} 加上width屬性
2016-08-13
因為你的.right未設定寬度，默認為自適應。right文字占多寬，就是多寬