twitter-bootstrap - 对引导程序中的清晰浮动样式感到困惑

Question

我读了一篇关于 clear float How To Clear Floats without Structural Markup的文章

然后我检查.clearfix引导程序：

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

我发现了一些差异，我有几个问题：

1. 为什么要clearfix分成几个部分？
2. 为什么display是table，不是block？
3. 为什么这个line-height用不了height？

Answer 1

为什么 clearfix 分成几个部分？

答： 通常

clear: both

用于清除浮动，在 bootstrap 中，.clearfix 是一个样式类，根据布局设计 :before 和 :after 选择器（它们是 css3 选择器）被使用，因此技术上清除浮动只使用一次。

为什么显示是表格而不是块？

回答：

display: block

只是显示元素而不是样式，而是显示：table 用于以表格方式显示元素。

为什么这使用行高而不是高度？

答： line-height 是两行之间的间距，而属性“height”用于分配元素的高度。（你可以在这里玩

line-height

http://jsfiddle.net/mastermindw/Wuwsh/2/）

我希望这些能消除你的疑虑！