在bootstrap中混淆清晰浮动样式

Question

我读了一篇关于清除浮动如何清除没有结构标记的浮动的文章

然后我检查.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

用于清除浮点数并且在引导程序中,.clearfix是一个样式类,并且根据布局设计:在选择器(它们是css3选择器)之前和之后使用,因此技术上清除浮点数仅使用一次.

为什么显示器是表,而不是块？

回答:

display: block

只是为了显示元素而不是样式而是显示:table用于以单元格方式显示元素.

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

答案: line-height是两行之间的间距,而属性"height"用于分配元素的高度.(你可以在这里玩

line-height

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

我希望这些能够解决你的疑虑!