bootstrap.css: .container:before 显示表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8933494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap.css: .container:before display table
提问by user1159485
In bootstrap.css
在bootstrap.css 中
you can find either from Github or from http://twitter.github.com/bootstrap/#
你可以从 Github 或http://twitter.github.com/bootstrap/# 找到
Why does it use:
为什么使用：
.container:before, .container:after {
display: table;
content: "";
zoom: 1;
}
.row:before, .row:after {
display: table;
content: "";
zoom: 1;
}
Why define display:table in .container:before/after and .row:before/after?
为什么在 .container:before/after 和 .row:before/after 中定义 display:table？
回答by thirtydot
http://nicolasgallagher.com/micro-clearfix-hack/
http://nicolasgallagher.com/micro-clearfix-hack/
The clearfix hackis a popular way to contain floatswithout resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required.
该clearfix黑客是一种流行的方式来遏制浮动，而不诉诸使用表象标记。本文介绍了 clearfix 方法的更新，它进一步减少了所需的 CSS 数量。
http://html5boilerplate.com/docs/The-style/#clearfix:
http://html5boilerplate.com/docs/The-style/#clearfix：
Adding
.clearfixto 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; }
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. Settingdisplay: tablecreates an anonymoustable-celland 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; }
Makes the:afterpseudo-element clear the floated children of this element, thereby making the element expand to contain the floats.
.clearfix { zoom: 1; }
Create new block formatting context in IE6/7 by triggeringhasLayout
添加
.clearfix到元素将确保它始终完全包含其浮动子元素。多年来有许多 clearfix hack 的变体，还有其他 hack 也可以帮助您包含浮动的孩子，但 H5BP 目前提供了这个微 clearfix helper 类。
.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
