bootstrap.css：.container：顯示錶之前

Question

在bootstrap.css

你可以找到或者從GitHub或http://twitter.github.com/bootstrap/#

爲什麼使用它：

.container:before, .container:after { 
    display: table; 
    content: ""; 
    zoom: 1; 
    } 

    .row:before, .row:after { 
    display: table; 
    content: ""; 
    zoom: 1; 
    } 

爲什麼定義顯示：.container中的表格：before/after和.row：之前/之後？

Answer 1

http://nicolasgallagher.com/micro-clearfix-hack/

的clearfix破解是一種流行的方式包含花車，而不訴諸 使用表象標記。本文介紹了更新 clearfix方法，該方法可進一步減少所需的CSS數量。

http://html5boilerplate.com/docs/The-style/#clearfix：

添加.clearfix的元素將確保它總是完全 包含其浮動孩子。這些年來，有很多變種的 clearfix黑客，還有其他的黑客也可以幫助你包含漂浮的孩子，但是H5BP目前提供 這個微軟的clearfix幫助類。

• .clearfix:before, .clearfix:after { content: ""; display: table; }
  此規則由除了IE6/7的所有瀏覽器理解。它在 包含浮動元素的內容之前和之後生成一個僞元素 。設置display: table創建一個匿名的 table-cell和一個新的塊格式化上下文。這樣做的目的是防止 頂端崩潰並提高現代瀏覽器和IE6/7之間的一致性。

• .clearfix:after { clear: both; }
  使得:after僞元素清除此元素的浮動孩子， 從而使元素擴展到包含浮動。

• .clearfix { zoom: 1; }
  通過觸發hasLayout

創建IE6/7新塊格式化上下文