關于position absolute
<!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:40px;background:#ccc}
.main{height:400px;background:red;}
.left{width:200px;height:400px;background:blue;}
.right{height:400px;background:green;margin-left:210px;}
.foot{height:40px;background:orange}
</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>
為什么、.left里不加position absolute就會變到下面去，而且被footer覆蓋？能解釋下面，明明只mian的子元素，為什么會到下面了
2016-06-24
我重新測試了下 ? 發現我前面說的有誤 ? ?我說的關于為什么left會在main之外是正確的 ?后半部分錯誤
實際上 ? ? left算是處于main所在區域 ?只是顯示的時候顯示在下面了（因為被right獨占一行） ? 那么 既然left不存在 ?，foot實際上顯示出來是與foot重疊的（文字部分就已經重疊了） 。之所以你測試和我的測試結果之前都顯示不重疊，因為那是設計窗口，當把代碼保存之后，或者使用實時窗口就會發現 foot和left重疊
2016-06-24
正好我剛做完這個 ? ?因為代碼里RIGHT 是在LEFT之前的 而你的main right是沒有width屬性的，所以right獨占main的一行且擁有margin-left屬性，然后left沒地方就被擠出來了。但是left本身應該算是在main所在區域。 所以在main的 ? 兩個都是main的子元素 ? 沒有float屬性的話就會這樣，這個的話什么原因我也說不好 ?我測試了下，left里的文字影響了foot的位置（如果left中文字是兩行，那么foot往下移兩行）。 ?這只是我的個人看法和測試結果的猜測。
2016-06-24
<!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}
.boss{width: 800px;height: auto; margin: 0px auto;}
.top{height:40px;background:#ccc}
.main{height:400px;width:800px;background-color: aquamarine;}
.left{width:200px;height:400px;background:blue;float: left;}
.right{height:400px; width:600px;background:green;float: right;}
.foot{height:40px;background:orange;float: none;}
</style>
</head>
<body>
<div class="boss">
<div class="top">top</div>
<div class="main">
? ? <div class="right">rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright</div>
? ? <div class="left">left</div>
</div>
<div class="foot">foot</div>
</div>
</body>
</html>