Co robi Klasa clearfix w css? [duplikat]
To pytanie ma już odpowiedź tutaj:
- co to jest clearfix? 11 odpowiedzi
Widziałem div znaczniki używają klasy clearfix, gdy jest potomkiem divs używają właściwości float. Klasa clearfix wygląda tak:
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
Odkryłem, że jeśli nie użyję clearfix Kiedy użyję właściwości bottom-border, granica będzie widoczna nad potomkiem divs. Can niech ktoś wyjaśni co robi Klasa clearfix? Ponadto, dlaczego istnieją dwie właściwości display? To wydaje mi się bardzo dziwne. Jestem szczególnie ciekawa, co oznacza content:'.'.
Dzięki, G
3 answers
Jak działają pływaki
Gdy elementy pływające istnieją na stronie, elementy nie pływające owijają się wokół elementy pływające, podobnie jak tekst krąży wokół obrazu w gazecie. Z perspektywy dokumentu (oryginalny cel HTML), tak działają pływaki.
float vs display:inline
Przed wynalezieniem display:inline-block, strony internetowe używają float do ustawiania elementów obok siebie. float jest preferowane od display:inline, ponieważ z tym ostatnim nie można ustawić wymiary elementu (szerokość i wysokość) oraz pionowe nakładki (góra i dół) - co mogą robić elementy pływające, ponieważ są traktowane jako elementy blokowe.
Problemy Float
Głównym problemem jest to, że używamy float wbrew jego zamierzonemu celowi.
Innym jest to, że o ile float pozwala elementom blokowym, pływaki nie nadają kształtu kontenerowi . To tak jak position:absolute, gdzie element jest "wyjęty z układu". Na przykład, gdy pusty kontener zawiera pływający 100px x 100px <div>, <div> nie nada mu wysokości 100px.
W przeciwieństwie do position:absolute, wpływa na otaczającą go treść. Zawartość po pływającym elemencie "zawija" się wokół elementu. Zaczyna się od renderowania obok niego, a następnie pod nim, jak to, jak tekst gazety przepływałby wokół obrazu.
Clearfix na ratunek
Co clearfix robi, aby wymusić zawartość po pływakach lub pojemniku zawiera pływaki do renderowania pod nim. Istnieje wiele wersji programu clear-fix, ale jego nazwa pochodzi od wersji, która jest powszechnie używana - tej, która używa właściwości CSS clear.
Przykłady
Oto kilka sposobów, aby zrobić clearfix , w zależności od przeglądarki i przypadku użycia. Wystarczy tylko wiedzieć, jak używać właściwości clear W CSS i jak pływaki renderują się w każdej przeglądarce,aby osiągnąć idealną poprawkę między przeglądarkami.
What you have
Twój podany styl jest formą clearfix z kompatybilnością wsteczną. znalazłem artykuł o tym clearfix. Okazuje się, że jest to stary clearfix - wciąż obsługujący stare przeglądarki. W artykule jest też nowsza, czystsza wersja. Oto podział:
Pierwsza poprawka clearfix dołącza niewidoczny pseudoelement, który jest stylizowany
clear:both, pomiędzy elementem docelowym a następnym elementem. Zmusza to pseudo-element do Renderuj pod obiektem docelowym, a następny element pod pseudo-elementem.Drugi dodaje styl
display:inline-block, który nie jest obsługiwany przez wcześniejsze przeglądarki. inline-block jest podobny do inline, ale daje pewne właściwości blokujące elementy, takie jak szerokość, wysokość, a także pionowe wypełnienie. To było ukierunkowane na IE-MAC.Było to ponowne zastosowanie
display:blockze względu na powyższą regułę IE-MAC. Zasada ta była "ukryta" przed IE-MAC.
W sumie, te 3 Zasady utrzymują .clearfix działającą między przeglądarkami, z myślą o starych przeglądarkach.
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-08-05 13:47:09
Gdy element, taki jak div jest floated, jego macierzysty kontener nie bierze już pod uwagę jego wysokości, tzn.
<div id="main">
<div id="child" style="float:left;height:40px;"> Hi</div>
</div>
Kontener nadrzędny nie będzie miał domyślnie 40 pikseli wysokości. Powoduje to wiele dziwnych dziwactw, jeśli używasz tych kontenerów do tworzenia układu.
Tak więc klasa clearfix, której używają różne frameworki, rozwiązuje ten problem poprzez uczynienie kontenera nadrzędnego "potwierdzającym" zawarte w nim elementy.
Z dnia na dzień zwykle używam frameworków takich jak 960gs, Twitter Bootstrap do układania i nie zawracania sobie głowy dokładną mechaniką.
Możesz przeczytać więcej tutaj
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
2015-02-26 07:13:25
clearfix jest tym samym co overflow:hidden. Zarówno przezroczyste dzieci rodzica, ale clearfix nie odetnie elementu, który przepełnia się do niego parent.
Działa również w IE8 i wyżej.
Nie ma potrzeby definiowania "." w treści&.clearfix. Po prostu napisz tak:
.clr:after {
clear: both;
content: "";
display: block;
}
HTML
<div class="parent clr"></div>
Przeczytaj te linki, aby dowiedzieć się więcej
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
2018-03-03 14:05:01