twitter-bootstrap 混淆引导程序中的清除浮动样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17006131/
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
Confuse about clear float style in bootstrap
提问by hh54188
I read an article about clear float How To Clear Floats Without Structural Markup
我读了一篇关于清除浮点数的文章如何在没有结构标记的情况下清除浮点数
then I check the .clearfixin bootstrap:
然后我检查.clearfix引导程序：
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
and I find some differences, and I have several questions:
我发现了一些差异，我有几个问题：
- Why the
clearfixseparate to several parts? - Why the
displayistable, not theblock? - Why this use
line-heightnot theheight?
- 为什么要
clearfix分成几个部分？ - 为什么
display是table，不是block？ - 为什么这个用
line-height不是height？
回答by wakqasahmed
Why the clearfix separate to several parts?
为什么 clearfix 分成几个部分？
Answer:Usually
答：通常
clear: both
is used to clearing floats and here in bootstrap, .clearfix is a style class and as per the layaout design :before and :after selectors (which are css3 selectors) are used so technically clearing float is used only once.
用于清除浮点数，在引导程序中，.clearfix 是一个样式类，根据布局设计 :before 和 :after 选择器（它们是 css3 选择器）被使用，因此从技术上讲，清除浮点数只使用一次。
Why the display is table, not the block?
为什么显示的是桌子，而不是方块？
Answer:
回答：
display: block
is just to show the element and not to style but display: table is used to display the element in a tablular manner.
只是显示元素而不是样式，而是显示： table 用于以表格方式显示元素。
Why this use line-height not the height?
为什么这使用 line-height 而不是高度？
Answer:line-height is spacing between two lines while attribute "height" is used to allocate height of an element. (you can play here with
答：line-height 是两行之间的间距，而属性“height”用于分配元素的高度。（你可以在这里玩
line-height
http://jsfiddle.net/mastermindw/Wuwsh/2/)
http://jsfiddle.net/mastermindw/Wuwsh/2/)
I hope these clears your doubts!
希望这些能解开你的疑惑！
