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+。