1.標準文檔流組成
塊級元素（block）
內聯元素（inline）
2.display屬性
作用：指定HTML標簽的顯示方式
常用屬性
| 值 | 說明 |
| block | 塊級元素的默認值，元素會被顯示為塊級元素，該元素前后會帶有換行符 |
| inline | 內聯元素的默認值。元素會被顯示為內聯元素，該元素前后沒有換行符 |
| inline-block | 行內塊元素，元素既具有內聯元素的特性，也具有塊元素的特性 |
| none | 設置元素不會被顯示 |
?3.display使用技巧
1、塊級元素與行級元素的轉變（block，inline）
2、控制塊元素排成一行（inline-block）
3、控制元素的隱藏（none）
4.浮動屬性
| 屬性值 | 說明 |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| none | 默認值。元素不浮動，并會顯示在其文本中出現的位置 |
5.clear屬性
| 值 | 說明 |
| left | 在左側不允許浮動元素 |
| right | 在右側不允許浮動元素 |
| both | 在左、右兩側不允許浮動元素 |
| none | 默認值。允許浮動元素出現在兩側 |
6.解決父級邊框塌陷
1、clear屬性可以清除浮動對其他元素造成的影響，可是依然解決不了父級邊框塌陷問題，怎么辦？
浮動元素后面加空div
設置父元素的高度
父級添加overflow屬性
父級添加偽類after
2、浮動元素后加空div
3、設置父元素的高度
4、父級添加 overflow屬性
overflow屬性：溢出處理
| 屬性值 | 說明 |
| visible | 默認值。內容不會被修剪，會呈現在盒子之外 |
| hidden | 內容會被修剪，并且其余內容是不可見的 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余內容 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容 |
5、父類添加偽類after
7.清除浮動，防止父級邊框塌陷的四種方法
浮動元素后面加空div
簡單，空div會造成HTML代碼冗余
設置父元素的高度
簡單，元素固定高會降低擴展性
父級添加overflow屬性
簡單，下拉列表框的場景不能用
父級添加偽類after
寫法比上面稍微復雜一點，但是沒有副作用，推薦使用
8.display：inline-block與float
display:inline-block
可以讓元素排在一行，并且支持寬度和高度，代碼實現起來方便
位置方向不可控制，會解析空格
IE 6、IE 7上不支持
float?
可以讓元素排在一行并且支持寬度和高度，可以決定排列方向
float 浮動以后元素脫離文檔流，會對周圍元素產生影響，必須在它的父級上添加清除浮動的樣式
?
