bootstrap.css: .container:before display table

Question

In bootstrap.css

you can find either from Github or from http://twitter.github.com/bootstrap/#

Why does it use:

.container:before, .container:after {   display: table;   content: "";   zoom: 1;   }    .row:before, .row:after {    display: table;    content: "";    zoom: 1;    } 

Why define display:table in .container:before/after and .row:before/after?

Answer 1

http://nicolasgallagher.com/micro-clearfix-hack/

The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required.

http://html5boilerplate.com/docs/The-style/#clearfix:

Adding .clearfix to an element will ensure that it always fully contains its floated children. There have been many variants of the clearfix hack over the years, and there are other hacks that can also help you to contain floated children, but the H5BP currently provides this micro clearfix helper class.

• .clearfix:before, .clearfix:after { content: ""; display: table; }
  This rule is understood by all browsers except for IE6/7. It generates a pseudo-element before and after the content of the element that contains floats. Setting display: table creates an anonymous table-cell and a new block formatting context. This acts to prevent top-margin collapse and improve the consistency between modern browsers and IE6/7.

• .clearfix:after { clear: both; }
  Makes the :after pseudo-element clear the floated children of this element, thereby making the element expand to contain the floats.

• .clearfix { zoom: 1; }
  Create new block formatting context in IE6/7 by triggering hasLayout