Pływaki CSS wyjaśnione w 5 pytaniach

CSS „Floats” (elementy pływające) są proste w użyciu, ale po użyciu efekt, który ma na elementach wokół niego, czasami staje się nieprzewidywalny. Jeśli kiedykolwiek natknąłeś się na problemy znikające z pobliskich elementów lub pływające, które wyrywają się jak ból kciuka, nie martw się więcej.

Ten post obejmuje pięć podstawowych pytań, które pomogą Ci stać się ekspertem w dziedzinie elementów pływających.

1. Które elementy nie pływają?
2. Co dzieje się z elementem, gdy pływa?
3. Co dzieje się z rodzeństwem „Floats”?
4. Co dzieje się z rodzicem „Float”?
5. Jak usunąć „Floats”?

Dla czytelników, którzy dodają podejście TL do życia, pod koniec postu znajduje się podsumowanie.

1. Które elementy nie pływają?

Na absolutny lub naprawiono pozycjonowany element nie unosi się. Więc następnym razem, gdy napotkasz pływak, który nie działa, sprawdź, czy jest w nim pozycja: absolutna lub pozycja: naprawiona i odpowiednio zastosuj zmiany.

2. Co dzieje się z elementem, gdy pływa?

Gdy element jest oznaczony jako „float”, biegnie w lewo lub w prawo, aż do momentu, gdy będzie on widoczny uderza w ścianę elementu pojemnika. Alternatywnie będzie działać aż do tego czasu uderza w inny pływający element, który już uderzył w tę samą ścianę. Będą się ustawiać obok siebie, aż skończy się przestrzeń, a nowi przychodzący zostaną przeniesieni w dół.

Pływające elementy również nie przekroczy elementów przed to w kodzie, coś, co musisz rozważyć przed kodowaniem a “Pływak” po element z boku, na którym chcesz go unosić.

Oto dwie dodatkowe rzeczy, które przytrafiają się elementowi pływającemu w zależności od tego, jaki typ elementu jest zmienny:

(1) Element inline zmieni się w element na poziomie bloku kiedy pływał.

Zastanawiałeś się kiedyś, dlaczego nagle możesz przypisać wysokość i szerokość pływającemu przęsło? Dzieje się tak dlatego, że wszystkie elementy pływające otrzymają wartość blok za to pokaz atrybut (tabela inline dostanie stół) czyniąc je elementami blokowymi.

(2) Element blokowy o nieokreślonej szerokości skurczy się, aby dopasować się do jego zawartości podczas płynięcia.

Zwykle, gdy nie podasz szerokości elementu blokowego, jego szerokość wynosi domyślnie 100%. Ale kiedy się unosi, to już nie przypadek; pole elementu bloku zmniejszy się, dopóki jego zawartość nie pozostanie widoczna.

3. Co dzieje się z Rodzeństwem „Pływaków”?

Kiedy zdecydujesz się na wprowadzenie elementu do grupy elementów, nie martw się o to, jak się zachowa, jego zachowanie będzie przewidywalne i będzie się poruszało w lewo lub w prawo. To, o czym naprawdę powinieneś myśleć, to jak rodzeństwo będzie się zachowywać.

„Pływaki” mają najbardziej troskliwego i posłusznego późniejszego rodzeństwa na całym świecie. Zrobią wszystko, co w ich mocy, aby pomieścić element pływający.

The tekst i elementy wstawiane będzie po prostu zrobić miejsce dla „Floats” i otoczyć „Float” kiedy jest na miejscu.

The elementy blokowe pójdzie o krok dalej i będzie owinąć się wokół „Float” hojnie, nawet jeśli oznacza to wykopanie własnych elementów potomnych, aby zrobić miejsce dla „Float”.

Sprawdźmy to w eksperymencie. Poniżej znajduje się niebieskie pole, a po nim czerwone pole o tym samym rozmiarze z niektórymi elementami dziecka.

Uciekajmy teraz niebieskie pudełko i zobaczmy, co stanie się z czerwonym pudełkiem i jego dziećmi.

Wszystko będzie dobrze, gdy czerwone pudełko przestanie obejmować niebieskie pudełko i można z niego korzystać przepełnienie: ukryte.

Kiedy dodasz przepełnienie: ukryte do elementu, który zawija pływak, przestanie to robić. Zobacz poniżej, jak zachowuje się czerwone pole przepełnienie: ukryte.

4. Co dzieje się z rodzicem „Float”?

Rodzice nie przejmują się zbytnio dziećmi „Float”, z wyjątkiem tego, że nie powinny wychodzić ze swoich lewych lub prawych granic.

Zazwyczaj element blokowy o nieokreślonej wysokości zwiększa swoją wysokość, aby pomieścić elementy potomne, ale nie dotyczy to dzieci „Float”. Jeśli rozmiar „Float” wzrośnie, jego rodzic nie zwiększy odpowiednio wysokości. To może być rozwiązane za pomocą przepełnienie: ukryte w rodzicu.

5. Jak wyczyścić „Floats”?

Wspomniałem już o użyciu przepełnienie: ukryte aby rodzic z wysokości dostosował się do pływającego dziecka, tworząc odpowiednią przestrzeń dla innych elementów po „Pławiku” i aby powstrzymać rodzeństwo przed zawijaniem „Pływaków”.

W ten sposób tworzysz żywy element w pobliżu „Float” bez żadnych kompromisów.

Jest inna metoda, w której elementy nie będą nawet w pobliżu ich rodzeństwa „Float”. Używając jasny atrybut możesz uczynić element wolnym od bycia w pobliżu „Float”.

wyczyść: w lewo; jasne: dobrze; oba czyste; 

lewo wartość usuwa wszystkie „Pływaki” po lewej stronie elementu i odwrotnie dobrze, i po obu stronach obie. To jasny atrybut może być użyty na rodzeństwie, pustym div lub na pseudo-elemencie zgodnie z Twoim wygodnym.

streszczenie

1. Elementy Absolute / Fixed nie będą się unosić.
2. „Pływak” nie przekracza elementu przed to w kodzie.
3. Jeśli w pojemniku nie ma wystarczającej ilości miejsca, „Float” zostanie zepchnięty w dół.
4. Wszystkie „Pływaki” są tworzone w elementy blokowe.
5. Jeśli szerokość nie jest określona na „Float”, zmniejszy się, aby dopasować ją do zawartości.
6. Późniejsze rodzeństwo „Float” albo je otoczy (inline i tekst), albo zawinie (bloki).
7. Aby zatrzymać element zawijający „Float”, użyj przepełnienie: ukryte.
8. Rodzice „Float” nie zwiększyliby swojej wysokości, aby pasowały do ​​pływaka.
9. Aby zmusić rodzica do zwiększenia wysokości zgodnie z „Pływakiem”, użyj przepełnienie: ukryte (lub stwórz puste rodzeństwo z jasny po tym)
10. Aby uniemożliwić elementowi znajdowanie się w pobliżu „Float”, użyj jasny atrybut.