bootstrap.css: .container: przed stołem wyświetlacza

Question

W bootstrap.css

można znaleźć zarówno z Github lub http://twitter.github.com/bootstrap/#

Dlaczego używać:

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

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

Dlaczego zdefiniować display: table in .container: before/after i .row: before/after?

Answer 1

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

clearfix włamać jest popularnym sposobem zawierają pływaków bez uciekania się do korzystania prezentacyjnego znaczników. W tym artykule przedstawiono aktualizację metody clearfix , która dodatkowo zmniejsza ilość wymaganego CSS.

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

Dodawanie .clearfix do elementu zapewni, że zawsze w pełni zawiera jego płynęły dzieci. Przez lata istniało wiele wariantów usuwania haseł i istnieją inne hacki, które mogą również pomóc w utrzymywaniu dzieci unoszonych, ale obecnie H5BP zapewnia tej klasy pomocniczej helpera.

• .clearfix:before, .clearfix:after { content: ""; display: table; }
  Zasada ta jest rozumiana przez wszystkich przeglądarkach z wyjątkiem dla IE6/7. Generuje on pseudoelement przed i po zawartości elementu, który zawiera elementy pływające. Ustawienie display: table powoduje utworzenie anonimowego i nowego kontekstu formatowania bloku. Działa to w celu zapobiegania zawyżaniu górnego marginesu i poprawy spójności między nowoczesnymi przeglądarkami a IE6/7.

• .clearfix:after { clear: both; }
  Sprawia, że ​​pseudo-element :after wyczyścić płynęły dzieci tego elementu, dzięki czemu element poszerzyć zawierają pływaków.

• .clearfix { zoom: 1; }
  Utwórz nowy kontekst formatowania blokowego w IE6/7 przez wyzwalanie hasLayout