1. 盒模型概述
頁面上的每個元素被看做矩形，這個框由外邊距，邊框，內邊距，內容組成。width和height指的是內容區域的寬高。
在ie的早期版本包括ie6中使用自己的非標準盒模型。width不再是內容的高度而是邊框，內邊距，內容的寬相加。
2. 外邊距疊加
當一個元素出現在另一個元素的上面時，第一個元素的底外邊距與第二個元素的頂外邊距發生疊加。
當一個元素包含在另一個元素時也會發生疊加
-
外邊距疊加初看有點奇怪，但它是有意義的如：
3. 可視化格式模型
css有三種基本定位機制：普通流，浮動和絕對定位。
塊集元素從上到下一個個排列。
行內框在一行水平排列，可以通過水平內邊距，邊框，外邊距調整水平間距，垂直內邊距，邊框，外邊距不影響行內框的高度可以通過設置行高增加（line-height）
4. 浮動的清除
浮動的元素會脫離文檔
4.1. 添加clear div(會添加許多空div)
.clear{
clear:both;
}
<div class='clear'></div>
4.2. 將父元素也浮動（影響后面的布局）
4.3. 應用overflow
應用值為hidden或auto的overflow屬性有一個副作用，會自動的清理包含的任何浮動。
.clear{
overflow:hidden;
}
.new img{
float:left;
}
.new p{
float:right;
}
<div class='new clear'>
<img src='pic.jpg'/>
<p>some text</p>
</div>
4.4. 借助：after
.clear:after{
content:'.';
height:0;
dispaly:block;
overflow:hidden;
clear:both;
}
在ie6和更低版本不起作用。
可以使用
小結
主要學了盒式模型，margin疊加，清除浮動
