Zrozumienie Bootstrap jest klasa clearfix

Question

.clearfix { 
    *zoom: 1; 
    &:before, 
    &:after { 
    display: table; 
    content: ""; 
    // Fixes Opera/contenteditable bug: 
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 
    line-height: 0; 
    } 
    &:after { 
    clear: both; 
    } 
} 

1. Dlaczego nie skorzystać display:block?
2. Ponadto, dlaczego ma to również zastosowanie do pseudoklasy ::before?

Answer 1

.clearfix jest zdefiniowany w less/mixins.less. Tuż nad jego definicji jest komentarz z linkiem do tego artykułu:

A new micro clearfix hack

W artykule wyjaśniono, jak to wszystko działa.

AKTUALIZACJA: Tak, odpowiedzi tylko link są złe. Wiedziałem o tym nawet wtedy, gdy opublikowałem tę odpowiedź, ale nie miałem ochoty na kopiowanie i wklejanie było w porządku z powodu praw autorskich, plagiatu i tego, co ty. Jednak teraz mam wrażenie, że jest OK, ponieważ mam link do oryginalnego artykułu. Powinienem też wspomnieć nazwisko autora, dla kredytu: Nicolas Gallagher. Oto mięso artykułu (zauważ, że „metoda Thierry za” odnosi się do Thierry Koblentz’s “clearfix reloaded”):

Ta „mikro clearfix” generuje pseudo-elementy i określa ich display do table. Tworzy to nowy format formatowania bloków , co oznacza, że ​​pseudoelement :before zapobiega zapadnięciu się górnego marginesu. Pseudoelement :after jest używany do usuwania obiektów pływających z poziomu . W rezultacie nie ma potrzeby ukrywania wygenerowanych treści, a całkowita ilość potrzebnego kodu jest mniejsza.

Łącznie selektora :before jest nie konieczne wyczyścić pływaków, ale zapobiega top-marże przed zapadnięciem w nowoczesnych przeglądarek. Ma to dwie zalety:

• Zapewnia wizualną spójność z innymi technikami pływak ograniczających, które tworzą nowy kontekst formatowania blokowego, np overflow:hidden

• Zapewnia spójność wizualną z IE 6/7, gdy jest zoom:1 stosowany.

N.B.: Istnieją okoliczności, w których IE 6/7 nie będzie zawierał dolnych marginesów zmiennych w nowym kontekście formatowania bloku. Więcej informacji można znaleźć tutaj: Better float containment in IE using CSS expressions.

Zastosowanie content:" " (zwróć uwagę na miejsce w ciągu zawartości) unika Opera bug który tworzy przestrzeń wokół elementów clearfixed jeśli przypisują contenteditable jest również obecny gdzieś w kodzie HTML. Podziękowania dla Sergio Cerruttiego za wykrycie tego błędu. Alternatywną poprawką jest , aby użyć font:0/0 a.

Legacy Firefox

< Firefox 3.5 skorzystają ze stosowania metody Thierry z dodatkiem visibility:hidden ukryć wstawiony znak. Ten dlatego starsze wersje Firefoksa trzeba content:"." uniknąć dodatkowa przestrzeń pojawia się między body i jej pierwszego elementu dziecka, w pewnych okolicznościach (np jsfiddle.net/necolas/K538S/.)

Alternatywne metody float ograniczających, które tworzą nowy blok kontekst formatowania, na przykład zastosowanie do elementu kontenera, spowoduje także uniknięcie tego zachowania w starszych wersjach Firefoksa.

Answer 2

Element :before pseudo nie jest potrzebny do clearfix włamywania się.

To tylko dodatkowa fajna funkcja pomagająca w zabezpieczeniu przed zapadnięciem się marginesu pierwszego elementu podrzędnego. W ten sposób górny margines elementu bloków podrzędnych elementu "usuniętego" jest gwarantowany i umieszczony pod górną krawędzią usuniętego elementu.

display:table jest używany, ponieważ display:block nie działa. Używanie marginesów zostanie zwinięte nawet z elementem :before.

Jest jedno zastrzeżenie: jeśli w komórkach tabeli zostanie użyte vertical-align:baseline z usuniętymi elementami <div>, Firefox nie będzie dobrze dopasowywał. Wtedy możesz chcieć użyć display:block pomimo utraty funkcji zapobiegającej zapadaniu się. W przypadku dalszych zainteresowań przeczytaj ten artykuł: Clearfix interfering with vertical-align.

Answer 3

Gdy w kontenerze nadrzędnym używany jest parametr clearfix, automatycznie zawija on wszystkie elementy podrzędne.

Jest zwykle używany po pływających elementach, aby wyczyścić układ pływający.

Gdy używany jest układ pływający, będzie on poziomo wyrównywać elementy potomne. Clearfix usuwa to zachowanie.

przykład - bootstrap paneli

W ładowalna, gdy stosowany jest panel klasy są 3 typy podrzędnych: panelu nagłówka, panelu ciała, panel stopki. Wszystkie z nich mają: układ bloku, ale element panelu ma uprzednio zastosowaną poprawkę. panel-body to główny typ kontenera, natomiast panel-nagłówek & panel-footer nie jest przeznaczony do kontenera, służy jedynie do przechowywania podstawowego tekstu.

Po dodaniu elementów pływających kontener macierzysty nie owija się wokół tych elementów, ponieważ wysokość elementów pływających nie jest dziedziczona przez kontener nadrzędny.

Tak na panelu nagłówka & panelu stopce, clearfix jest potrzebne, aby wyczyścić układ pływaka elementów: klasa Clearfix daje wizualne wrażenie, że wysokość kontenera nadrzędnego zostały zwiększone, aby pomieścić wszystkich jego elementów podrzędnych.

<div class="container"> 
    <div class="panel panel-default"> 
     <div class="panel-footer"> 
      <div class="col-xs-6"> 
       <input type="button" class="btn btn-primary" value="Button1"> 
       <input type="button" class="btn btn-primary" value="Button2"> 
       <input type="button" class="btn btn-primary" value="Button3"> 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-footer"> 
      <div class="col-xs-6"> 
       <input type="button" class="btn btn-primary" value="Button1"> 
       <input type="button" class="btn btn-primary" value="Button2"> 
       <input type="button" class="btn btn-primary" value="Button3"> 
      </div> 
      <div class="clearfix"/> 
     </div> 
    </div> 
</div>