為什么右邊（right）浮動，不能實現寬度自適應呢？ 代碼如下：
<!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{width:100%;height:80px;background:#ccc;}
.main{height:600px;background:#f00;margin:0 auto;}
.left{width:200px;height:100%;background:#00f; }
.right{height:100%;background:#0da;float:right;}
.foot{height:50px;background:#f31;}
</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-03-29
浮動元素如果不定量設置寬高，則其寬高屬性默認為0值。如果不設定寬高的浮動元素里面有子內容，例如你代碼中的文本right，則浮動元素的寬高由文本right的寬高決定。所以設置了浮動屬性的元素是無法自適應的，必須取消其浮動屬性。
你可以試著把你代碼中的height:100%去掉，就會發現.right這個塊縮到了.main的右上角。
但要注意的是，如果把浮動屬性去掉，那么.right就會是一個子塊，會占滿整個.main塊，因為這個時候你設置的高度是100%，同父級塊，而塊元素是要單獨占一行的。于是.left塊就會被擠出.main塊區域。
這時候就必須要為.left預留足夠邊距，即 margin-left:200px;。想要出現題目中的間隔縫隙，只需把左邊距加大即可。
但這個時候你又會發現，.left塊仍然會被擠到下方。這就是因為.left的設置語句出現在.right后，屬于后加載對象。所以.main依然不會有位置給它。這個時候就要用到絕對定位，把.left固定在.main的左邊。這個絕對定位可以相對于body，也可以相對于.main。如果要相對于.main，則要在.main中加入相對定位，才能保證其子元素的定位是相對于父級定位的。
2016-03-24
上面代碼顯示的結果是這樣的。為什么right元素右浮動之后不能自適應寬度呢
2016-03-23
不設置高度能撐開，開發的時候一般不設高度
2016-03-18
left{ width:200px;height:500px;position:absolute;left:0;top:100px;background:blue;}
.right{background:#9C9;height:500px;margin-left:210px;}
2016-03-18
因為right設置了float，無法撐大main，所以main寬度為200px（只有left撐大main）；而main是right的父元素，所以right的寬度等于main元素的寬度。