怎樣讓區塊元素在同一行顯示？有兩種辦法：

1. 設定區塊元素的display為inline-block
2. 設定浮動

對display：inline-block的理解：

1）inline-block將物件呈遞為內聯物件，但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內，但是會解析換行符，允許空格，同時可以設定寬度和高度屬性。

2）IE8不相容該方法，修改方法為：

先使用display:inline-block屬性觸發塊元素，然後再定義display:inline，讓塊元素呈遞為內聯物件（兩個display要先後放在兩個CSS宣告中才有效果），程式碼：

div {display:inline-block;...} 

3）使用該方法會使兩個元素之間產生間隔，怎樣去除inline-block兩個元素之間的間隔呢？有以下方法

a. 將margin設為負值；

b. 將兩個標籤的空格（換行）刪掉或用<!--   -->註釋掉；

c. 將父元素字型大小設為0，在子元素上重新設定字型大小；（較推薦）

   d. 父元素設定letter-spacing為負值，子元素letter-spacing為0；

   e. 父元素設定word-spacing為負值，子元素word-spacing為0；

關於浮動（float：left/right/none）：

1. 浮動會使元素脫離文件流，遇到父級邊界或者同級浮動元素時停住，會使父元素高度崩塌
2. 清除浮動的幾種方法：

1. 給父元素設定高度（不推薦）

優點：簡單、程式碼少、容易掌握 

缺點：高度有時候是未知的。當瀏覽器寬度變化時，元素會換行，需要重新定義高度

1. 給父元素設定overflow：hidden/scroll/auto（不推薦）

優點：簡單、程式碼少、瀏覽器支援好 

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。

1. 給浮動元素後加一個空標籤，樣式style=“clear : both ;”（不推薦）

      優點：簡單、程式碼少、瀏覽器支援好、不容易出現怪問題 

缺點：會增加一個毫無意義的空標籤

1. .clearfix:before,.clearfix:after{display:block;content:"";}
   .clearfix:after{clear:both;}.clearfix{*zoom:1}（相容ie 觸發haslayout）（推薦）

並給浮動元素的父元素新增clearfix類

優點：瀏覽器支援好、不容易出現怪問題

缺點：程式碼多、不少初學者不理解原理，要兩句程式碼結合使用才能讓主流瀏覽器都支援

1. 給浮動元素的父元素設定overflow：auto（不推薦，僅瞭解）

優點：簡單、程式碼少、瀏覽器支援好 缺點：內部寬高超過父級div時，會出現滾動條。 

1. 給父元素也設定浮動（不推薦）

    沒有優點，會帶來新的浮動問題

1. 給父元素新增display : table屬性（不推薦）

將父元素div變為表格，沒有優點，會帶來一些未知的問題

1. 給浮動元素後新增標籤<br style="clear:both"/>（不推薦）

父子級元素包含的時候子級的margin-top會傳遞給父級

 解決辦法 ：  1.給父級新增border;           2.父級使用overflow:hidden;            3.不要使用margin-top 給父級用padding-top