Confuse about clear float style in bootstrap

Question

I read an article about clear float How To Clear Floats Without Structural Markup

then I check the .clearfix in bootstrap:

.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:

1. Why the clearfix separate to several parts?
2. Why the display is table, not the block?
3. Why this use line-height not the height?

Answer 1

Why the clearfix separate to several parts?

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.

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.

Why this use line-height not the 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

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

I hope these clears your doubts!