Question

我读了一篇关于clear float How To Clear Floats Without Structural Markup

的文章

然后我在bootstrap中检查.clearfix：

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

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

为什么clearfix分成几个部分？
为什么display是table，而不是block？
为何使用line-height而不是height？

Answer 1

为什么clearfix与几个部分分开？

<强>答案：一般

clear: both

用于清除浮点数，这里是bootstrap，.clearfix是一个样式类，按照layaout设计：在选择器（css3选择器）之前和之后使用，所以技术上清除float只使用一次。

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

<强>答案：

display: block

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

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

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

line-height

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

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

在bootstrap中混淆清晰浮动样式

1 个答案: