bootstrap.css:.container:显示表之前

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:before / after?

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

clearfix hack是一种stream行的方式来包含浮动,而不诉诸使用表示标记。 本文介绍了clearfix方法的更新,进一步减less了所需的CSS数量。

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

.clearfix添加到元素将确保它始终完全包含其浮动子元素。 这些年来,clearfix hack已经有很多变种了,还有其他的黑客也可以帮助你包含漂浮的孩子,但是H5BP目前提供了这个微软的clearfix助手。

  • .clearfix:before, .clearfix:after { content: ""; display: table; }
    除了IE6 / 7之外,所有的浏览器都能理解这个规则。 它在包含浮动元素的元素的内容之前和之后生成一个伪元素。 设置display: table创build一个匿名table-cell和一个新的块格式化上下文。 这样做的目的是防止高利润率崩溃,并提高现代浏览器和IE6 / 7之间的一致性。

  • .clearfix:after { clear: both; }
    :after伪元素:after使该元素的浮动子元素清除,从而使元素扩展为包含浮动元素。

  • .clearfix { zoom: 1; }
    通过触发hasLayout在IE6 / 7中创build新的块格式上下文