float與display屬性
這里有一段菜鳥才會寫出的代碼：
html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
?#father{
width:800px;height:100%;margin:0 auto;padding:10px; background-color:blue;display:table-cell;
}
#left{
float:left; background-color:pink;}
#right{
overflow:hidden;background-color:gray;}
</style>
</head>
<body>
<div id="father">father
<div id="left" >left</div>
<div id="right" >right</div>
</div>
</body>
</html>
由于本人是菜鳥，所以就把完整代碼貼上來了。注意到上面的display：table-cell了嗎？一旦我加上這個屬性，我設置的自動居中屬性就會失效（margin：0 auto）！換成inline-block也是一樣的。這是什么鬼？當然啦，我本意是設計一個左右大小相互適應的布局的……
2016-09-02
id為father的div,原為塊狀元素（display:block;），獨占一行。當{display:table-cell}或{display:inline-block;}時，#father變為行內元素（display:inline-block;），不能獨占一行，{margin:0 auto；}就失效了。
設計一個左右大小相互適應的布局,css可以參考如下：
#father{ width:80%; height:600px; margin:0 auto}
#left{ width:20%; height:600px; background:#ccc; float:left}
#right{ width:80%; height:600px; background:#FCC; float:right}
3. 建議看一下課程：“如何用CSS進行網頁布局”之類的。