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 hack 是一种流行的方式包含花车而无需诉诸使用表示标记。本文介绍了一个更新 clearfix方法，进一步减少了所需的CSS数量。

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

将.clearfix添加到元素将确保它始终完整   包含漂浮的孩子。有很多变种   clearfix hack多年来，还有其他黑客也可以   帮助您控制漂浮的孩子，但H5BP目前提供   这个micro 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中创建新的块格式化上下文

bootstrap.css：.container：在显示表之前

1 个答案: