bootstrap.css：.container：在显示表之前 [英] bootstrap.css: .container:before display table

问题描述

在 bootstrap.css

中，您可以从Github或从 http://twitter.github.com/bootstrap/#

you can find either from Github or from 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：之前/之后？

Why define display:table in .container:before/after and .row:before/after?

推荐答案

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

clearfix hack 是一种流行的方式包含浮动广告，而不使用
来使用演示标记。本文介绍了对
clearfix方法的更新，进一步减少了所需的CSS数量。

The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required.

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

向元素添加 .clearfix 将确保它总是完全
包含其浮动子元素。多年来，有许多变种的
clearfix hack，还有其他的hack，也可以
帮助你包含浮动的孩子，但H5BP目前提供
这个micro clearfix helper类

Adding .clearfix to an element will ensure that it always fully contains its floated children. There have been many variants of the clearfix hack over the years, and there are other hacks that can also help you to contain floated children, but the H5BP currently provides this micro clearfix helper class.

• .clearfix：before，.clearfix：after {content：; display：table; }
  
  除IE6 / 7之外的所有浏览器都能理解此规则。它在
  包含浮点数的元素的内容之前和之后生成
  伪元素。设置 display：table 创建一个匿名
  table-cell 和一个新的块格式化上下文。这可防止
  顶部边缘折叠并提高现代
  浏览器和IE6 / 7之间的一致性。

• .clearfix:before, .clearfix:after { content: ""; display: table; }
  This rule is understood by all browsers except for IE6/7. It generates a pseudo-element before and after the content of the element that contains floats. Setting display: table creates an anonymous table-cell and a new block formatting context. This acts to prevent top-margin collapse and improve the consistency between modern browsers and IE6/7.

.clearfix：after {clear：both; }

使：之后伪元素清除此元素的浮动子元素
，元素展开以包含浮动。

.clearfix:after { clear: both; }
Makes the :after pseudo-element clear the floated children of this element, thereby making the element expand to contain the floats.

.clearfix {zoom：1; }

触发 hasLayout

这篇关于bootstrap.css：.container：在显示表之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！