CSS Floats wyjaśnione przez jazdę po ruchomych schodach

Jeśli kiedykolwiek wskoczyłeś na schody ruchome, możesz szybko zrozumieć pływaki.

Twój

jest prawie idealny. Zdecydowałeś się wprowadzić niektóre zmiennoprzecinkowe, aby naprawić związek między kilkoma elementami.

Następną rzeczą, którą wiesz, są to, że twoje nowo unoszone elementy wyskakują z twojego starannie wybranego porządku i przyklejają się do boku div jak magnes. Przypomina się zwrot „niezamierzone zachowanie”.

Osobiście spędziłem godziny próbując w pełni zrozumieć zmiennoprzecinkowe. Przeczytałem artykuł i powiedziałem: „Och, to ma sens!” Następnie wróciłem do mojego kodu, wypróbowałem go i… zawiodłem. Powrót do tablicy kreślarskiej.

Zrobię co w mojej mocy, aby oszczędzić ci tego losu.

Pływaki tworzą alternatywne przepływy. To jest najtrudniejsza część do zrozumienia. Po ich wprowadzeniu musisz napisać swój kod, aby uwzględniał maksymalnie trzy przepływy: normalny, lewy i prawy. Jest to zupełnie nowy zestaw reguł, w przeciwieństwie do manipulowania szerokością elementów lub ich pozycjonowaniem.

W rzeczywistości spławiki są dość podobne do dynamiki jazdy na schodach ruchomych, a ja pokażę, jak można ich używać obok właściwości clear, aby tworzyć krystalicznie czyste relacje w obrębie div. W ten sposób przy następnej próbie użycia liczb zmiennoprzecinkowych w kodzie nie spotkasz żadnych niespodzianek.

Szanuj pas przełęczy

Domyślny przepływ elementów przypomina trochę powyższy obrazek. Jakiś facet stoi pośrodku z ręką na poręczy. Zajmuje cały ruchome schody. Nikt go nie ominie. Naprawdę, kiepska etykieta schodów ruchomych.

Stoi za grupą innych ludzi, którzy robią to samo, więc nikt też nie może ich wyprzedzić. Nie ma koncepcji ścieżek ani podstawowej ludzkiej przyzwoitości.

Jest to scenariusz, gdy w ogóle nie używasz liczb zmiennoprzecinkowych.

W porządku, teraz rozmawiamy! Ludzie wykazujący pewien poziom świadomości. Uwielbiam to widzieć.

Mamy jeden pas utworzony po lewej stronie, a drugi pas utworzony po prawej stronie. Inne osoby mogą z łatwością poruszać się między dwiema osobami, które stoją w miejscu i szybciej chodzić po ruchomych schodach, jeśli chcą. Nikt nie blokuje przepływu, stojąc na środku.

Jest to scenariusz, w którym używasz pływaków w div. Jest lewy i prawy przepływ, a elementy, które nie są pływające, mogą łatwo wypełnić przestrzeń, która nie jest zajęta przez pływające elementy.

Pływaki: lewy i prawy

Korzystanie z pływaków może wprowadzić do dwóch nowych przepływów: lewy i prawy.

Pozwala to na normalny przepływ elementów, które nie mają wartości zmiennoprzecinkowych, w celu wypełnienia przestrzeni wokół tych elementów.

Pływaki umożliwiają tworzenie nowych relacji między przepływami.

Gdybyś miał jedną linię ludzi stojącą pośrodku windy, miałbyś ograniczone możliwości tworzenia nowych konstrukcji. Ale kiedy masz lewą i prawą kolumnę, nagle możesz określić, że niektóre osoby stoją po prawej, inne pozostają w lewo, a inna grupa może wypełnić luki.

Umożliwia to tworzenie bardziej czytelnego i zrozumiałego kodu, ponieważ właściwość float daje również wskazanie związku elementu z otaczającymi elementami.

Wyczyść własność

Jest jeszcze jedna zmarszczka, o której jeszcze nie rozmawialiśmy: czysta właściwość. „Wyczyść” pozwala elementom określić, gdzie powinny być wyrównane w porównaniu do elementów pływających.

Na pierwszym zdjęciu sekcji „Pływaki” dwaj jeźdźcy schodów ruchomych stali uprzejmie po każdej stronie schodów ruchomych. Dzięki temu inni mogą je minąć i swobodnie się poruszać, jak chcą.

Powiedzmy, że zamiast jednego pływającego lewego elementu i jednego pływającego prawego elementu, zamiast tego mieliśmy 3 pływające lewe elementy i 1 po prawej. Trzy pływające lewe elementy ułożą się w linię po lewej stronie, jeśli nadamy im również właściwość „clear: left”. Ale jeśli zostaną wyrównane poziomo z pływającym prawym elementem, może to bardzo utrudnić lub wręcz uniemożliwić przejście normalnego przepływu elementów:

„Clear: left” mówi każdej osobie unoszącej się w lewo, że powinna ustawić się za pierwszym elementem unoszącym się w lewo. W zależności od wielkości dwóch dolnych osób, normalne elementy mogą być trudne do przeciśnięcia się i zajmowania miejsca w prawym górnym rogu. Nawet dobre praktyki w zakresie ruchomych schodów mogą nadal prowadzić do blokowania.

Jednym z najczęstszych zastosowań właściwości clear jest „clear: oba”. Pozwala to zresetować przepływ elementów, w przeciwieństwie do dalszego utrzymywania przepływu prawego, lewego i normalnego. To trochę jak ten facet na schodach, który zajmuje całą przestrzeń, bo przyniósł swoją walizkę.

W przypadku opcji „jasne: oba” nie ma znaczenia, gdzie ten jeden facet stoi zorientowany na swoją walizkę. Nie ma znaczenia, kto stoi po jego lewej lub prawej stronie. Nadal blokuje cały schody ruchome. Ludzie, którzy pójdą za nim, będą musieli rozpocząć nowy przepływ elementów, który może obejmować dowolny z trzech przepływów: lewy, prawy lub normalny.

Uciekł z systemu trzech przepływów i zresetował zasady. Złe dla osób, które chcą uruchomić schody ruchome? Pewnie. Ale dobrze, jeśli chcesz powstrzymać kogokolwiek od przejścia.

Zauważ, że różni się to od tego jednego dżentelmena na początku, który stał pośrodku schodów ruchomych, za szeregiem ludzi, którzy robili to samo. To był system jednoprzepływowy. „Wyczyść: oba” potwierdza, że ​​mogą występować maksymalnie trzy przepływy, i blokuje przejście dowolnego następnego elementu.

Jeśli podobał Ci się ten post, możesz także zapoznać się z moimi innymi wyjaśnieniami dotyczącymi trudnych tematów CSS i JavaScript, takich jak pozycjonowanie, Model-View-Controller i oddzwanianie.

A jeśli uważasz, że może to pomóc innym ludziom w tej samej pozycji co ty, daj mu „serce”!

Ten post pierwotnie pojawił się na blogu CodeAnalogies.