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