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

Wyjaśnię Ci graficznie, dlaczego clear: both; jest wymagane lub co robi...

Zazwyczaj projektanci przesuwają elementy w lewo lub w prawo, co tworzy pustą przestrzeń po drugiej stronie, która pozwala innym elementom zająć Pozostałe miejsce.

Dlaczego pływają elementy?

Elementy są unoszone, gdy projektant potrzebuje dwóch elementów poziomu bloków obok siebie. Na przykład powiedzmy, że chcemy zaprojektować podstawową stronę internetową, która ma układ jak poniżej...

Przykład na żywo obrazu demo.

Kod Do Demo

/*  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 będziesz musiał dodać header, footer, aside, section (i innych elementów HTML5) jako display: block; W arkusz stylów do wyraźnego wskazania, że elementy są elementami na poziomie bloków.

Wyjaśnienie:

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

Brak pływaków dla header, Następnie pojawia się tag aside, którego będę używał na pasku bocznym strony, więc będę pływał element w lewo.

Uwaga: Domyślnie element poziomu bloku zajmuje dokument o szerokości 100% , ale gdy unosi się w lewo lub w prawo, zmieni rozmiar zgodnie z na zawartość, którą posiada.

1. Normalne Zachowanie Elementu Poziomu Bloku
2. Floated Behavior Of Block Level Element

Więc jak zauważysz, lewy pływający div pozostawia przestrzeń do prawej nieużywanej, co pozwoli div po nim przesunąć się w pozostałej przestrzeni.

1. div's będą renderować jeden po drugim, jeśli nie zostaną unoszone
2. div przesunie się obok siebie, jeśli pływała w lewo lub w prawo

Ok, więc tak zachowują się elementy blokowe, gdy pływają w lewo lub w prawo, więc dlaczego jest wymagane clear: both; i dlaczego?

Więc jeśli zauważysz w demo layoutu-na wypadek, gdybyś zapomniał, proszę. tak..

Używam klasy o nazwie .clear i posiada ona właściwość o nazwie {[21] } o wartości both. Więc zobaczmy, dlaczego to potrzebuje both.

Wypłynąłem aside i section elementy w lewo, więc załóżmy scenariusz, gdzie mamy basen, gdzie header jest stałym lądem, aside i section pływają w basenie, a stopka znowu jest stałym lądem, coś w tym stylu..

Więc niebieska woda nie ma pojęcia, jaki jest obszar pływających elementów, mogą być większe niż basen lub mniejsze, więc pojawia się częsty problem, który niepokoi 90% początkujących CSS: dlaczego tło elementu kontenera nie jest rozciągnięte, gdy zawiera pływające elementy. To dlatego, że element kontenera jest POOL tutaj i 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 nie będzie się rozciągać.

1. Normalny Przepływ Dokumentu
2. Sekcje Płynące Do Lewej
3. Wyczyszczone Elementy W Celu Rozciągnięcia Koloru Tła Kontenera

(Patrz ^[Clearfix] sekcja tej odpowiedzi dla schludny sposób, aby to zrobić. Używam empty div przykład celowo w celu wyjaśnienia)

Podałem 3 przykłady powyżej, pierwszy to normalny przepływ dokumentu, w którym red tło będzie renderowane zgodnie z oczekiwaniami, ponieważ kontener nie zawiera żadnych pływających obiektów.

W drugim przykładzie, gdy obiekt jest unoszony w lewo, element kontenera (pula) nie będzie znał wymiarów unoszonych elementów, a zatem nie będzie rozciągał się do wysokości unoszonych elementów.

Po używając clear: both;, element kontenera zostanie rozciągnięty do jego pływających wymiarów.

Inny powód clear: both; jest używany, aby zapobiec przesuwaniu się elementu w pozostałej przestrzeni.

Powiedzmy, że chcesz 2 elementy obok siebie i inny element pod nimi... Więc będziesz unosić 2 elementy w lewo i chcesz drugi poniżej nich.

1. div / align = "left" / przestrzeń
2. Floated div wyczyszczone tak, że znacznik section będzie renderował poniżej floated div s

Pierwszy przykład

Drugi przykład

Wreszcie, znacznik footer będzie renderowany po elementach pływających, ponieważ użyłem klasy clear przed zadeklarowaniem moich znaczników footer, co zapewnia, że wszystkie elementy pływające (lewa/prawa) zostaną wyczyszczone do tego punkt.

Clearfix

Coming to clearfix, który jest związany z pływakami. Jak już określono przez @Elky, sposób, w jaki czyścimy te pływaki, nie jest czystym sposobem, ponieważ używamy pustego elementu div, który nie jest elementem div, jest przeznaczony dla. Stąd nadchodzi clearfix.

Pomyśl o tym jak o wirtualnym elemencie, który utworzy dla Ciebie pusty element, zanim twój element nadrzędny się skończy. Spowoduje to samo wyczyszczenie elementu owijarki elementy pływające. Ten element nie będzie istniał w Twoim DOM dosłownie, ale wykona zadanie.

Aby samodzielnie wyczyścić dowolny element owijarki posiadający elementy pływające, możemy użyć

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

Zwróć uwagę na :after pseudo element użyty przeze mnie do tego class. Spowoduje to utworzenie elementu wirtualnego dla elementu owijarki tuż przed jego zamknięciem. Jeśli spojrzymy w dom można zobaczyć, jak pojawia się w drzewie dokumentów.

Więc jeśli widzisz, jest renderowany po floated child div gdzie usuwamy Floaty, które są niczym innym jak równoznaczne z pustym elementem div z właściwością clear: both;, której również używamy do tego celu. Teraz dlaczego display: table; i content jest poza tym zakresem odpowiedzi, ale możesz dowiedzieć się więcej o pseudo elemencie tutaj .

Zauważ, że będzie to również działać w IE8 jako IE8 obsługuje :after pseudo .

Oryginalna Odpowiedź:

Większość programistów unosi swoje treści w lewo lub w prawo na swoich strony, prawdopodobnie div z logo, paskiem bocznym, treścią itp., te div-y pływają w lewo lub w prawo, pozostawiając pozostałą przestrzeń nieużywaną, a zatem jeśli umieścisz inne kontenery, będą pływały również w pozostałej przestrzeni, więc aby zapobiec użyciu clear: both;, wyczyści wszystkie elementy pływające w lewo lub w prawo.

Demonstracja:

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

A teraz co jeśli chcesz zrobić drugi render div poniżej div1, więc użyjesz clear: both;, aby upewnić się, że wyczyścisz wszystkie pływaki, lewo lub prawo

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