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

问题描述

在 bootstrap.css

中，您可以从Github或从

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?

推荐答案

：

• .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：在显示表之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！