bootstrap.css: .container: Antes de mesa de exhibición

Question

En bootstrap.css

se pueden encontrar ya sea desde Github o desde http://twitter.github.com/bootstrap/#

¿Por qué se utiliza:

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

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

¿Por definir pantalla: tabla en .container: antes/después y .row: antes/después?

Answer 1

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

El clearfix hackear es una forma popular para contener flotadores sin tener que recurrir a la utilización de marcas de presentación. Este artículo presenta una actualización del método clearfix que reduce aún más la cantidad de CSS requerida.

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

Adición .clearfix a un elemento se asegurará de que siempre plenamente contiene sus hijos flotaban. Ha habido muchas variantes del hack clearfix a lo largo de los años, y hay otros hacks que también pueden ayudarlo a contener los niños flotados , pero el H5BP proporciona actualmente esta clase de ayuda micro clearfix.

• .clearfix:before, .clearfix:after { content: ""; display: table; }
  Esta regla es entendido por todos los navegadores excepto para IE6/7. Genera un pseudo-elemento antes y después del contenido del elemento que contiene flotantes. El valor display: table crea un contexto anónimo table-cell y un nuevo contexto de formato de bloque. Esto actúa para evitar el colapso del margen superior y mejorar la coherencia entre los navegadores modernos y IE6/7.

• .clearfix:after { clear: both; }
  Hace que el pseudo-elemento :after borrar los niños flotaban de este elemento, con lo que el elemento de expandir para contener los flotadores.

• .clearfix { zoom: 1; }
  Crear nuevo contexto de formato de bloque en IE6/7 mediante la activación de hasLayout