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 ...
/* 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--><divclass="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ą.
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.
( 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.
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 .
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(FloatedLeft)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(FloatedLeft)------------------<div style="clear: both;"><!--This<div> acts as a separator--></div>----------------------------------Other div renders here now
----------------------------------
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.
@ 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
Ś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.
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.
float
i chcesz następnego elementu poniżej, nie po prawej ani po lewej stronie.Odpowiedzi:
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 coclear: 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
Pokaż fragment kodu
Uwaga: Być może trzeba dodać
header
,footer
,aside
,section
(i inne elementy HTML5) jakdisplay: 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ęaside
tag, którego będę używać na pasku bocznym mojej witryny, więc przestawię element w lewo.Tak jak zauważyłeś, lewy pływający
div
pozostawia miejsce po prawej niewykorzystane, co pozwolidiv
przesunąć się po nim w pozostałej przestrzeni.div
Wyrenderują jeden po drugim, jeśli NIE zostaną zmienionediv
przesunie się obok siebie, jeśli uniesie się w lewo lub w prawoOk, 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
.clear
i posiada właściwość o nazwieclear
o wartościboth
. Zobaczmy więc, dlaczego potrzebujeboth
.Unosiłem się
aside
isection
elementy po lewej stronie, więc załóżmy scenariusz, w którym mamy basen, w którymheader
jest lądy,aside
isection
pł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.
( Przejrzyj sekcję [Clearfix] tej odpowiedzi, aby zrobić to schludnie. Korzystam z pustego
div
przykładu celowo w celu wyjaśnienia)Podałem 3 przykłady powyżej. Pierwszy to normalny obieg dokumentów, 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 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.
div
Unosi się w lewo, powodującsection
przejście do pozostałej przestrzenidiv
wyczyszczone, dzięki czemusection
tag będzie renderowany poniżej pływającychdiv
s1. przykład
2. przykład
Last but not least,
footer
tag będzie renderowany po elementach pływających, ponieważ korzystałem zclear
klasy przed zadeklarowaniem moichfooter
znacznikó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
div
elementu, który nie jestdiv
elementem 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ć
Zwróć uwagę na
:after
pseudoelement użyty do tego celuclass
. 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
div
którym usuwamy pływaki, co jest niczym innym jak tylko pustymdiv
elementem zclear: both;
właściwością, której również używamy do tego. Teraz dlaczegodisplay: table;
icontent
jest 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
:after
pseudo .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:
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źródło
display: inline-block
na elemencie, a na rodziców można użyćtext-align: left
,text-align: center
lubtext-align: right
na przykład.clear
Wł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ącychPokaż fragment kodu
clear: left;
Element przesunięty poniżej lewych elementów pływającychPokaż fragment kodu
clear: right;
Element przesunięty pod prawymi elementami pływającymiPokaż fragment kodu
clear: both;
Element przesunięty poniżej wszystkich elementów pływającychPokaż fragment kodu
clear
nie wpływa na zmiennoprzecinkowe poza bieżącym kontekstem formatowania blokuPokaż fragment kodu
źródło
display: inline-block;
właściwość css z tego scenariusza? Rozciągnieinline-block
element 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ć?display: inline-block
oznacza, ż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).CSS unosi się i jest czysty
Sample Fiddle
Po prostu spróbuj usunąć
clear:both
właściwośćdiv
zclass
sample
i zobacz, jak to się zmieniadivs
.źródło
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 pustediv
pod 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.źródło
clearfix
: stackoverflow.com/questions/211383/...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:
źródło