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中定义display:table:before/after和.row:before/after？

Answer 1

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

该clearfix黑客是一种流行的方式来遏制浮动,而不诉诸使用表象标记.本文介绍了clearfix方法的更新,进一步减少了所需的CSS数量.

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

添加.clearfix到元素将确保它始终完全包含其浮动的子元素.这些年来,clearfix hack有很多变种,还有其他的hacks也可以帮助你包含漂浮的孩子,但是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; }
  通过触发在IE6/7中创建新的块格式化上下文 hasLayout