Co robi reguła CSS „jasne: oba”?

293

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

.clear { clear: both; }

I dlaczego musimy go używać?

Peter Mortensen
źródło
22
Gdy używasz CSS floati chcesz następnego elementu poniżej, nie po prawej ani po lewej stronie.
Riz
Niedozwolone są elementy pływające po lewej i prawej stronie określonego elementu, gdy element jest używany z
opcją

Odpowiedzi:

687

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

wprowadź opis zdjęcia tutaj

Na żywo przykład obrazu demonstracyjnego.

Kod do demonstracji

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

Widok swobodny

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.

wprowadź opis zdjęcia tutaj

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

wprowadź opis zdjęcia tutaj

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

wprowadź opis zdjęcia tutaj


2. przykład

wprowadź opis zdjęcia tutaj

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.

Clearfix

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
----------------------------------
Pan Alien
źródło
3
Jeśli nigdy nie słyszałeś o pływakach, sugeruję najpierw przeczytać wprowadzenie do pływaków --- na przykład zobacz link w następnej odpowiedzi. Potem wróć i przeczytaj tę odpowiedź - będzie miała sens.
osa
37
Zauważ, że floaty nie zostały pierwotnie wymyślone, aby miały obok siebie dwa elementy na poziomie bloku, to tylko efekt uboczny! Pierwotnym celem było umożliwienie przepływu tekstu wokół obrazów w tekście, dzięki czemu obrazy były unoszone w obu kierunkach.
Duch Madary
3
Powiązana krótka odpowiedź skierować przed przeczytaniem tego, aby uzyskać ogólny pomysł .. stackoverflow.com/questions/16568272/
Pan Alien
@ mr-alien Dobry przykład, jednak w przypadku jsfiddle.net/N82UD/1 podczas zmniejszania ekranu występuje problem z funkcją float, a element „wyczyszczony” nie podąża za przepływem: jsfiddle.net/N82UD/138 It zajmuje przestrzeń pływającego przedmiotu 2
Omar
1
@Carlo: Alternatywa, która jest często używana w szablonach takich jak Twitter Bootstrap, na przykład; jest umieszczenie display: inline-blockna elemencie, a na rodziców można użyć text-align: left, text-align: centerlub text-align: rightna przykład.
Daan
39

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

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

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

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

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

Salman A.
źródło
1
Świetny. To najlepsza odpowiedź. Zastanawiam się, dlaczego inna odpowiedź została zaakceptowana.
sawa,
Co się stanie, jeśli usuniemy display: inline-block;właściwość css z tego scenariusza? Rozciągnie inline-blockelement nadrzędny do elementu rodzeństwa, który ma klasę float-left. Co sprawia, że ​​„Clear nie wpływa na zmiennoprzecinkowe poza bieżącym kontekstem formatowania bloku” niepoprawna instrukcja. Czy ktoś mógłby wyjaśnić?
Sashrika Waidyarathna
@SashrikaWaidyarathna: element nadrzędny niekoniecznie generuje kontekst formatowania bloku dla swoich elementów podrzędnych . W twoim przykładzie (a) usunięcie display: inline-blockoznacza, że ​​nie generuje już kontekstu formatowania bloku (b) zmiennoprzecinkowe / czyści się w tym elemencie, a pierwszy zmiennoprzecinkowy staje się częścią tego samego kontekstu formatowania bloków (rzutnia).
Salman A
@ SalmanA, dzięki za wyjaśnienie dotyczące specyfikacji css. Nie byłem świadomy definicji kontekstu formatowania bloku.
Sashrika Waidyarathna
2
Sundar Pichai doppelganger?
Manoj Kumar
13

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.

elky
źródło
Ten inny post zawiera więcej szczegółów na temat clearfix: stackoverflow.com/questions/211383/...
Bill Hoag,
2

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:

Saeed
źródło
3
Jaki samouczek?
Peter Mortensen,