Do czego służy następująca reguła CSS:

.clear { clear: both; }

I dlaczego musimy go używać?

Nie będę wyjaśniać, w jaki sposób działają pływaki tutaj (szczegółowo), ponieważ to pytanie ogólnie koncentruje się na Dlaczego używać clear: both;LUB co clear: both;dokładnie robi ...

Postaram się, aby ta odpowiedź była prosta i rzeczowa, i wyjaśnię ci graficznie, dlaczego clear: both;jest wymagana lub co robi ...

Zasadniczo projektanci unoszą elementy w lewo lub w prawo, co tworzy pustą przestrzeń po drugiej stronie, co pozwala pozostałym elementom zająć pozostałą przestrzeń.

Dlaczego pływają elementy?

Elementy są przenoszone, gdy projektant potrzebuje 2 elementów na poziomie bloku obok siebie. Powiedzmy na przykład, że chcemy zaprojektować podstawową stronę internetową, która ma układ podobny do poniższego ...

Na żywo przykład obrazu demonstracyjnego.

Kod do demonstracji

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

Uwaga: Być może trzeba dodać header, footer, aside, section(i inne elementy HTML5) jak display: block;w arkuszu stylów dla wyraźnie zaznaczyć, że elementy są elementami poziomu blokowego.

Wyjaśnienie:

Mam podstawowy układ, 1 nagłówek, 1 pasek boczny, 1 obszar treści i 1 stopkę.

Brak zmiennoprzecinkowych header, następnie pojawi się asidetag, którego będę używać na pasku bocznym mojej witryny, więc przestawię element w lewo.

Uwaga: Domyślnie element na poziomie bloku zajmuje dokument o szerokości 100%, ale po przestawieniu w lewo lub w prawo zmienia rozmiar zgodnie z zawartą w nim zawartością.

1. Normalne zachowanie elementu poziomu bloku
2. Floated Behavior Of Block Level Element

Tak jak zauważyłeś, lewy pływający divpozostawia miejsce po prawej niewykorzystane, co pozwoli divprzesunąć się po nim w pozostałej przestrzeni.

1. divWyrenderują jeden po drugim, jeśli NIE zostaną zmienione
2. div przesunie się obok siebie, jeśli uniesie się w lewo lub w prawo

Ok, więc tak zachowują się elementy na poziomie bloku, gdy są unoszone w lewo lub w prawo, więc teraz dlaczego jest to clear: both;wymagane i dlaczego?

Więc jeśli zauważysz w pokazie układu - na wypadek, gdybyś zapomniał, oto jest ...

Korzystam z klasy o nazwie .cleari posiada właściwość o nazwie clearo wartości both. Zobaczmy więc, dlaczego potrzebuje both.

Unosiłem się asidei sectionelementy po lewej stronie, więc załóżmy scenariusz, w którym mamy basen, w którym headerjest lądy, asidei sectionpływamy w basenie, a stopka jest znowu w lądzie, coś w tym rodzaju ..

Tak więc niebieska woda nie ma pojęcia, jaki jest obszar pływających elementów, mogą one być większe niż basen lub mniejsze, więc pojawia się wspólny problem, który niepokoi 90% początkujących CSS: dlaczego tło elementu kontenerowego nie jest rozciągnięte gdy zawiera elementy pływające. Dzieje się tak, ponieważ element kontenera jest tu POOL , a POOL nie ma pojęcia, ile obiektów jest pływających ani jaka jest długość lub szerokość pływających elementów, więc po prostu się nie rozciągnie.

1. Normalny obieg dokumentu
2. Sekcje przesunięte w lewo
3. Wyczyszczone elementy pływające, aby rozciągnąć kolor tła pojemnika

( ^Przejrzyj sekcję ^[Clearfix] tej odpowiedzi, aby zrobić to schludnie. Korzystam z pustego divprzykładu celowo w celu wyjaśnienia)

Podałem 3 przykłady powyżej. Pierwszy to normalny obieg dokumentów, w którym redtło będzie renderowane zgodnie z oczekiwaniami, ponieważ kontener nie zawiera żadnych pływających obiektów.

W drugim przykładzie, gdy obiekt jest przestawiany w lewo, element kontenera (POOL) nie zna wymiarów elementów pływających, a zatem nie będzie rozciągał się na wysokość elementów pływających.

Po użyciu clear: both;element kontenera zostanie rozciągnięty do wymiarów elementu pływającego.

Innym powodem clear: both;jest to, że element nie przesuwa się w pozostałej przestrzeni.

Powiedzmy, że chcesz 2 elementy obok siebie, a kolejny element pod nimi ... Więc przeniesiesz 2 elementy w lewo, a drugi chcesz pod nimi.

1. divUnosi się w lewo, powodując sectionprzejście do pozostałej przestrzeni
2. Floated divwyczyszczone, dzięki czemu sectiontag będzie renderowany poniżej pływających divs

1. przykład

2. przykład

Last but not least, footertag będzie renderowany po elementach pływających, ponieważ korzystałem z clearklasy przed zadeklarowaniem moich footerznaczników, co zapewnia, że ​​wszystkie elementy pływające (lewy / prawy) zostaną wyczyszczone do tego momentu.

Clearfix

Wchodzi do clearfix, który jest związany z pływakami. Jak już określono w @Elky , sposób, w jaki usuwamy te zmiennoprzecinkowe , nie jest czystym sposobem, aby to zrobić, ponieważ używamy pustego divelementu, który nie jest divelementem przeznaczonym. Stąd oto poprawka.

Pomyśl o tym jak o elemencie wirtualnym, który utworzy dla ciebie pusty element przed końcem elementu nadrzędnego. Spowoduje to samodzielne wyczyszczenie elementu owijającego zawierającego elementy pływające. Ten element nie będzie istniał w twoim DOM dosłownie, ale wykona zadanie.

Aby samemu wyczyścić dowolny element opakowania z elementami pływającymi, możemy użyć

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

Zwróć uwagę na :afterpseudoelement użyty do tego celu class. To utworzy wirtualny element dla elementu opakowania tuż przed jego zamknięciem. Jeśli spojrzymy na dom, możesz zobaczyć, jak pokazuje się w drzewie dokumentów.

Jeśli więc widzisz, jest renderowany po pływającym dziecku, w divktórym usuwamy pływaki, co jest niczym innym jak tylko pustym divelementem z clear: both;właściwością, której również używamy do tego. Teraz dlaczego display: table;i contentjest poza zakresem odpowiedzi, ale możesz dowiedzieć się więcej o pseudoelemencie tutaj .

Zauważ, że zadziała to również w IE8, ponieważ IE8 obsługuje :afterpseudo .

Oryginalna odpowiedź:

Większość programistów unosi swoją zawartość w lewo lub w prawo na swoich stronach, prawdopodobnie div trzyma logo, pasek boczny, treść itp., Div div są pływane w lewo lub w prawo, pozostawiając resztę miejsca nieużywaną, a zatem jeśli umieścisz inne pojemniki, będzie unoszą się także w pozostałej przestrzeni, więc aby temu zapobiec clear: both;, usuwa wszystkie elementy unoszące się w lewo lub w prawo.

Demonstracja:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

Co teraz, jeśli chcesz, aby inne div renderowało się poniżej div1, więc użyjesz, clear: both;aby upewnić się, że wyczyścisz wszystkie pływaki, w lewo lub w prawo

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------

clearWłaściwość wskazuje, że w lewo, w prawo lub w obie strony elementu nie mogą być w sąsiedztwie wcześniej elementów pływających w kontekście formatowania samym bloku. Wyczyszczone elementy są przesuwane poniżej odpowiednich elementów pływających. Przykłady:

clear: none; Element pozostaje przylegający do elementów pływających

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

clear: left; Element przesunięty poniżej lewych elementów pływających

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

clear: right; Element przesunięty pod prawymi elementami pływającymi

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

clear: both; Element przesunięty poniżej wszystkich elementów pływających

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

clear nie wpływa na zmiennoprzecinkowe poza bieżącym kontekstem formatowania bloku

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

CSS unosi się i jest czysty

Sample Fiddle

Po prostu spróbuj usunąć clear:bothwłaściwość divz class samplei zobacz, jak to się zmienia divs.

Odpowiedź pana Alien jest idealna, ale nie polecam jej używać, <div class="clear"></div>ponieważ jest to tylko hack, który powoduje, że twoje znaczniki są brudne. Jest to bezużyteczne puste divpod względem złej struktury i semantycznej, co również powoduje, że kod nie jest elastyczny. W niektórych przeglądarkach div powoduje dodatkową wysokość i musisz dodać, height: 0;co jeszcze gorsze. Ale prawdziwe problemy zaczynają się, gdy chcesz dodać tło lub obramowanie wokół elementów pływających - po prostu się zawali, ponieważ sieć została źle zaprojektowana . Zalecam zawijanie elementów pływających do kontenera z regułą CSS clearfix . To także hack, ale piękny, bardziej elastyczny w użyciu i czytelny dla ludzi i robotów SEO.

Jeśli chcesz umieścić jeden element na dole drugiego elementu, użyj tego kodu w CSS. Służy do pływaków.

Jeśli unosisz zawartość, możesz unosić się w lewo lub w prawo ... więc we wspólnym układzie możesz mieć lewą nawigację, div treści i stopkę.

Aby stopka znajdowała się poniżej obu tych pływaków (jeśli pływałeś w lewo i prawo), ustaw stopkę jako clear: both.

W ten sposób pozostanie poniżej obu pływaków.

(Jeśli pozostało ci tylko wyczyszczenie, to naprawdę musisz clear: left;.)

Przejdź przez ten samouczek: