bootstrap.css: .container: prima tabella di visualizzazione

Question

In bootstrap.css

si possono trovare sia da Github o da http://twitter.github.com/bootstrap/#

Perché si usa:

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

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

Perché definire display: table in .container: before/after e .row: before/after?

Answer 1

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

Il clearfix incidere è un modo popolare per contenere carri senza ricorrere all'utilizzo di markup di presentazione. Questo articolo presenta un aggiornamento al metodo di correzione rapida che riduce ulteriormente la quantità di CSS richiesta.

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

Aggiunta .clearfix ad un elemento farà in modo che esso sempre pienamente contiene i suoi figli galleggiavano. Ci sono state molte varianti della correzione di clearfix nel corso degli anni, e ci sono altri hack che possono anche aiutare a contenere bambini flottati, ma l'H5BP attualmente fornisce questa classe helper micro clearfix.

• .clearfix:before, .clearfix:after { content: ""; display: table; }
  Questa regola è compreso da tutti i browser tranne per IE6/7. Genera uno pseudo-elemento prima e dopo il contenuto dell'elemento che contiene float. L'impostazione display: table crea un anonimo table-cell e un nuovo contesto di formattazione del blocco. Questo agisce per prevenire il collasso del margine superiore e migliorare la coerenza tra i moderni browser e IE6/7.

• .clearfix:after { clear: both; }
  Rende lo pseudo-elemento :after cancellare i bambini galleggiavano di questo elemento, rendendo così l'elemento espandersi per contenere i galleggianti.

• .clearfix { zoom: 1; }
  Crea nuovo contesto di formattazione a blocchi in IE6/7 innescando hasLayout