float,clear,BFC理解

參考網址：學習CSS佈局
display

• "display"屬性：none

  另外一個經常使用的`display`值是 `none` 。一些特殊元素的默認` display` 值是它，例如` script` 。

  display:none 一般被 JavaScript 用來在不刪除元素的狀況下隱藏或顯示元素。

  它和 visibility 屬性不同。把 display 設置成 none 不會保留元素本該顯示的空間，

  可是 visibility: hidden; 還會保留。

margin

• margin: auto;
  `

  #main {
        width: 600px;
        margin: 0 auto; 
  }
  <div class="main">
      設置塊級元素的 width 能夠阻止它從左到右撐滿容器。
      而後你就能夠設置左右外邊距爲 auto 來使其水平居中。
      元素會佔據你所指定的寬度，而後剩餘的寬度會一分爲二成爲左右外邊距。
      惟一的問題是，當瀏覽器窗口比元素的寬度還要窄時，
      瀏覽器會顯示一個水平滾動條來容納頁面。讓咱們再來改進下這個方案...
  </div>

  `

max-width

• max-width

  #main {
       max-width: 600px;
       margin: 0 auto; 
     }
     <div id="main">
     在這種狀況下使用 max-width 替代 width 可使瀏覽器更好地處理小窗口的狀況。
     這點在移動設備上顯得尤其重要，調整下瀏覽器窗口大小檢查下吧！
     順便提下， 全部的主流瀏覽器包括IE7+在內都支持 max-width ，因此放心大膽的用吧。
     </div>

box-sizing

• box-sizing

通過了一代又一代人們意識到數學很差玩，因此他們新增了一個叫作 box-sizing 的CSS屬性。
當你設置一個元素爲 box-sizing: border-box; 時，此元素的內邊距和邊框再也不會增長它的寬度。

* {
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
       box-sizing: border-box;
}

既然 box-sizing 是個很新的屬性，目前你還應該像我以前在例子中那樣使用 -webkit- 和 -moz- 前綴。
這能夠啓用特定瀏覽器實驗中的特性。同時記住它是支持IE8+。