Zrozumienie klasy clearfix Bootstrapa

Question

Zrozumienie klasy clearfix Bootstrapa

.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;
  }
}

Dlaczego nie użyć display:block?
dodatkowo, dlaczego stosuje się to również do ::before pseudoklasy?

61

clearfix twitter-bootstrap less

Author: Todd Sprang, 2013-02-20

Source

3 answers

:before pseudo element nie jest potrzebny do samego hack clearfix.

To tylko dodatkowa funkcja pomagająca zapobiegać spadaniu marginesu pierwszego elementu potomnego. W ten sposób górny margines bloku potomnego elementu "clearfixed" jest gwarantowany, aby być umieszczony poniżej górnej granicy elementu clearfixed.

display:table jest używany, ponieważ display:block nie działa. Użycie display:block marginesów zwija się nawet z :before element.

Jest jedno zastrzeżenie: jeśli vertical-align:baseline jest używany w komórkach tabeli z elementami clearfixed <div>, Firefox nie będzie dobrze wyrównywał. W takim razie możesz użyć display:block pomimo utraty funkcji zapobiegającej zapadaniu się. W przypadku dalszego zainteresowania przeczytaj ten artykuł: Clearfix interfering with vertical-align .

9

Author: codefan-BK,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-12 20:19:59

Gdy clearfix jest używany w kontenerze nadrzędnym, automatycznie owija się wokół wszystkich elementów potomnych.

Jest zwykle używany po elementach pływających do wyczyszczenia układu float.

W przypadku użycia układu float elementy potomne będą wyrównywane poziomo. Clearfix czyści to zachowanie.

Przykład-Panele Bootstrap

W bootstrap, gdy używany jest panel klasy, są 3 typy potomne: panel-header, panel-body, panel-footer. Wszystkie z nich mają wyświetlacz: układ blokowy, ale Panel-body ma wcześniej zastosowany clearfix. panel-body jest głównym typem kontenera, podczas gdy panel-nagłówek i panel-stopka nie jest przeznaczony do kontenera, jest przeznaczony tylko do przechowywania podstawowego tekstu.

Jeśli elementy pływające zostaną dodane, kontener macierzysty nie zostanie owinięty wokół tych elementów, ponieważ wysokość elementów pływających nie jest dziedziczona przez kontener macierzysty.

Więc dla panelu-nagłówek & panel-stopka, clearfix jest potrzebne, aby wyczyścić układ float elementy: Klasa Clearfix daje wizualny wygląd, że wysokość kontenera macierzystego została zwiększona, aby pomieścić wszystkie jego elementy potomne.

 <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>

1

Author: Virk Bilal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-02 15:26:16

score 83 · Accepted Answer

.clearfix jest zdefiniowana w less/mixins.less. Jest to jeden z najbardziej znanych i najbardziej znanych zespołów w Polsce.]}

Nowy hack micro clearfix

Artykuł wyjaśnia, jak to wszystko działa.

UPDATE: Tak, odpowiedzi tylko na link są złe. Wiedziałem o tym nawet w momencie, gdy opublikowałem tę odpowiedź, ale nie czułem, że kopiowanie i wklejanie było OK ze względu na prawa autorskie, plagiat i co masz. Jednak teraz czuję, że jest OK, ponieważ połączyłem się z oryginalny artykuł. Powinienem również wspomnieć nazwisko autora, choć, dla uznania: Nicolas Gallagher. To jest mięso z artykułu (zauważ, że" metoda Thierry 'ego" odnosi się do Thierry 'ego Koblentza " clearfix reloaded"):

Ten "micro clearfix" generuje pseudoelementy i ustawia ich display do table. Tworzy to anonimową komórkę tabeli i nowy kontekst formatowania bloków, który oznacza pseudoelement :before zapobiega zapadaniu się górnego marginesu. The :after pseudo-element służy do oczyścić pływaki. W rezultacie nie ma potrzeby ukrywania wygenerowanych zawartość i całkowita ilość potrzebnego kodu jest zmniejszona.

W tym selektor :before jest Nie konieczne, aby wyczyścić pływa, ale zapobiega zapadaniu się górnych marginesów w nowoczesnych przeglądarki. Ma to dwie zalety:

Zapewnia wizualną spójność z innymi technikami zabezpieczającymi float, które tworzą nowy kontekst formatowania bloków, np., overflow:hidden

Zapewnia wizualną spójność z IE 6/7 po zastosowaniu zoom:1.

N. B.: istnieją okoliczności, w których IE 6/7 nie będzie zawierał dolnych marginesów pływaków w nowym kontekście formatowania bloków. Więcej szczegółów można znaleźć tutaj: lepsze zabezpieczenie float w IE używanie wyrażeń CSS .

Użycie content:" " (zwróć uwagę na spację w łańcuchu treści) unika Opera bug że tworzy przestrzeń wokół elementów clearfixed, jeśli contenteditable atrybut jest również obecny gdzieś w HTML. Podziękowania dla Sergio Cerrutti za Zauważenie tej poprawki. Alternatywnym rozwiązaniem jest do użycia font:0/0 a.

Legacy Firefox

Firefox visibility:hidden do ukrycia wstawionego znaku. To jest dlatego, że starsze wersje Firefoksa potrzebują content:".", aby uniknąć dodatkowe miejsce pojawiające się pomiędzy body a jego pierwszym dzieckiem element, w pewnych okolicznościach (np. jsfiddle.net/necolas/K538S/.)

Alternatywne metody przechowywania float, które tworzą nowy blok formatowanie kontekstu, np. stosowanie overflow:hidden lub display:inline-block do elementu kontenera, również tego uniknąć zachowanie w starszych wersjach Firefoksa.