Co robi klasa clearfix w css?

Question

Widziałem div znaczniki używają klasy clearfix, gdy jest to dziecko divs używać właściwości divs użyć właściwości . Klasa clearfix wygląda następująco:

.clearfix:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
.clearfix { 
    display: inline-block; 
} 
.clearfix { 
    display: block; 
} 

Okazało się, że jeśli nie używam clearfix kiedy użyć właściwości bottom-border granica pokaże nad dzieckiem divs. Czy ktoś może wyjaśnić, co robi klasa clearfix? Ponadto, dlaczego istnieją dwie właściwości: display? Wydaje mi się to bardzo dziwne. Jestem szczególnie ciekawy, co oznacza content:'.'.

Dzięki, G

Answer 1

Jak pływaki pracy

Kiedy elementy pływające istnieć na stronie, nie-pływające elementy zawinięcia elementów pływających, podobne do tego, jak tekst krąży wokół obrazu w gazecie. Z perspektywy dokumentu (oryginalny cel HTML), w ten sposób działają elementy pływające.

float vs display:inline

Przed wynalezieniem display:inline-block, strony internetowe używać float ustawić elementy obok siebie. float jest preferowany w stosunku do display:inline, ponieważ nie można ustawić wymiarów elementu (szerokość i wysokość), a także pionowych krawędzi (góra i dół) - które elementy pływające mogą zrobić, ponieważ są traktowane jako elementy blokowe.

problemy Float

Głównym problemem jest to, że używamy float przed swoim przeznaczeniem.

Innym jest to, że podczas gdy float pozwala na równoległe blokowanie elementów, pływaki nie nadają kształtowi jego pojemnikowi. To jest jak position:absolute, gdzie element jest "wyjęty z układu". Na przykład, gdy pusty pojemnik zawiera pływające 100px x 100px <div>, <div> nie nadadzą 100px wysokość do pojemnika.

W przeciwieństwie do position:absolute wpływa na zawartość, która go otacza. Treść po pływającym elemencie "zawinie się" wokół elementu. Zaczyna się od renderowania obok, a następnie pod nim, tak jak tekst gazety przepływałby wokół obrazu.

Clearfix na ratunek

Co clearfix nie jest zmuszenie treść po pływaków lub pojemnika zawierającego pływaki do renderowania poniżej. Istnieje wiele wersji do clear-fix, ale ma swoją nazwę od wersji, która jest powszechnie używana - tej, która używa właściwości CSS clear.

Przykłady

Here are several ways to do clearfix, w zależności od przypadku przeglądarki i używać. Trzeba tylko wiedzieć, jak wykorzystać właściwość clear w CSS i jak pływają symbole renderowania w każdej przeglądarce, aby uzyskać idealną klarowność między przeglądarkami.

Co masz

Twój styl warunkiem jest formą clearfix z wstecznej kompatybilności. I found an article o tej poprawce. Okazuje się, że jest to OLD Clearfix - wciąż obsługujący stare przeglądarki. Istnieje również nowsza, czystsza wersja tego artykułu. Oto podział:

• Pierwszy clearfix masz dołącza niewidzialną pseudo-element, który jest stylizowany clear:both między elementu docelowego i następnego elementu. Zmusza pseudoelement do renderowania poniżej celu, a następny element poniżej pseudoelementu.

• Drugi dołącza styl display:inline-block, który nie jest obsługiwany przez wcześniejsze przeglądarki. Blok inline jest jak wbudowany, ale daje pewne właściwości blokujące elementy, takie jak szerokość, wysokość oraz pionowe wypełnienie. Było to przeznaczone dla IE-MAC.

• To była ponowna aplikacja display:block z powodu powyższej reguły IE-MAC. Ta zasada była "ukryta" od IE-MAC.

W sumie te 3 zasady utrzymania .clearfix pracy cross-browser, ze starymi przeglądarkami w umyśle.

Answer 2

Gdy element, taki jak div jest floated, opakowanie nadrzędny nie uważa, że ​​jego wysokość, to znaczy

<div id="main"> 
    <div id="child" style="float:left;height:40px;"> Hi</div> 
</div> 

Pojemnik macierzysty nie będzie wynosić 40 pikseli wysokości domyślnie. Powoduje to wiele dziwnych małych dziwactw, jeśli używasz tych kontenerów do ułożenia układu.

Tak więc klasa clearfix używana w różnych frameworkach rozwiązuje ten problem, sprawiając, że kontener macierzysty "rozpoznaje" zawarte w nim elementy.

Zwykle używam tylko szkieletów takich jak 960gs, Twitter Bootstrap do układania i nie zawracania sobie głowy dokładną mechaniką.

mogą więcej tu

http://www.webtoolkit.info/css-clearfix.html

Answer 3

clearfix jest taka sama jak overflow:hidden. Zarówno czyste, pływające dzieci rodzica, ale clearfix nie odetną elementu, który przeleje się do niego, parent. Działa również w IE8 & powyżej.

Nie ma potrzeby definiowania "." w treści & .clearfix.Wystarczy napisać tak:

.clr:after { 
    clear: both; 
    content: ""; 
    display: block; 
} 

HTML

<div class="parent clr"></div> 

Przeczytaj te linki, aby uzyskać więcej

http://css-tricks.com/snippets/css/clear-fix/,

What methods of ‘clearfix’ can I use?