Float - jedna z podstawowych funkcji języka CSS (Cascading Style Sheets - formatowanie tabel kaskadowych). Ten język istnieje od 1996 roku i nadal ewoluuje. W tej chwili programiści używają już trzeciej wersji CSS. Dzięki językowi programowania CSS możliwe jest stworzenie przyjemnej i przyjemnej strony, która nie wydaje się przestarzała lub niewygodna dla użytkownika, nawet jeśli w ogóle nie korzystasz z javascriptu. Współczesne cechy trzeciej wersji pozwalają to zrobić. Ponadto programiści mogą korzystać z wygodniejszych opcji formatowania, takich jak Flexbox lub Position, aby zmienić położenie elementu na stronie, ale wszystko jest w porządku. Na początek powinieneś rozważyć zalety i wady właściwości Float.

CSS Float - Dlaczego tego potrzebujesz?

Float - właściwość dla elementów pozycjonujących. Każdego dnia można go zobaczyć na stronach gazet i czasopism, patrząc na zdjęcia i tekst, który delikatnie okrąża je. W świecie kodów HTML i CSS, używając funkcji Float, to samo powinno się stać. Warto jednak pamiętać, że edycja zdjęć nie zawsze jest głównym celem tej funkcji. Może służyć do tworzenia popularnego rozmieszczenia elementów strony w dwóch, trzech, czterech kolumnach. W rzeczywistości właściwość Float CSS jest stosowana do praktycznie dowolnego elementu html. Znając podstawy edycji położenia elementów za pomocą Float, a następnie Property, tworzenie dowolnego projektu witryny nie będzie specjalną pracą. Specjaliści programistyczni mogączasem nie zauważają obrazów i przechodzą nad nimi. Całkiem podobne rzeczy zdarzają się w projektowaniu stron internetowych, tylko z tym, że tekst, zamiast łapać na wyświetlanym obrazie (jeśli właściwości Float są niewłaściwie stosowane) obok lub pod nim, ale nie zawsze tam, gdzie deweloper potrzebuje .

CSS Float description of property

W rzeczywistości zdolność do używania własności Float to bardzo dobry as w rękawie dla dowolnego projektanta stron internetowych. Niestety nieumiejętność zrozumienia działania tej funkcji może prowadzić do konfliktów z elementami witryny i innych tego rodzaju frustracji. Wcześniej podobne sytuacje wystąpiły w przypadku błędów w przeglądarkach. Teraz tajemnica, jak prawidłowo korzystać z właściwości Float, zostanie odkryta i nie będzie już problemu z tym. Właściwość Float ma cztery wartości:

Float: inherit;

Float: right;

Float: w lewo;

Float: none;

Dla tych, którzy znają angielski, wartość parametrów właściwości Float powinna być jasna. Ale dla tych, którzy nie wiedzą, możesz dać małe wyjaśnienie. Parametr: left; przesuwa ciało elementu w skrajnie lewy róg elementu rodzica. To samo dzieje się (tylko na drugą stronę) z parametrem bcgjkmpjdfybb: right; . Wartość: dziedzicz; mówi elementowi, aby przyjął te same parametry, co w obiekcie nadrzędnym. Te elementy są również nazywane powiązanymi, ponieważ znajdują się bezpośrednio wewnątrz obiektu nadrzędnego w kodzie HTML. Właściwość: brak; pozwala elementowi nie naruszać normalnego przepływu dokumentu, jest ustawiony jako domyślny dla wszystkichczęści kodu.

Jak działa Float?

Właściwość Float CSS działa dość prosto. Wszystko, co zostało opisane powyżej, można zrobić bez większego wysiłku. Wtedy wszystko będzie równie proste. Ale zanim zaczniesz studiować właściwości Float, warto trochę zrozumieć teorię. Każdy element strony internetowej jest blokiem. Łatwo to zobaczyć, otwierając konsolę w Google Chrome, naciskając Ctrl + Shift + J. Tekst, tytuł, obraz, link i wszystkie inne części strony będą wyświetlane w blokach o tylko różnych rozmiarach. Najpierw wszystkie te bloki idą jeden po drugim. Jak widać na przykładzie poniżej, wiersze kodu są po kolei, więc będą wyświetlane ściśle jeden po drugim. Nazywa się to przepływem normalnym. W tym kursie wszystkie bloki leżą jedna na drugiej (bez przekraczania ciała elementów) w pionie. Po pierwsze, cała zawartość strony internetowej znajduje się w ten sposób. Ale przy użyciu, na przykład, właściwości języka CSS Float Left, element pozostawia swoją naturalną pozycję na stronie i przesuwa się do skrajnej lewej pozycji. Takie zachowanie nieuchronnie prowadzi do kolizji z tymi elementami, które pozostały w normalnym toku. Innymi słowy, elementy zamiast znajdować się pionowo, są teraz blisko siebie. Jeśli element nadrzędny ma wystarczająco dużo miejsca, aby móc umieścić w sobie dwie jednostki zależne, to nie występuje kolizja, a jeśli nie, nałożenie jednego obiektu na drugi jest nieuniknione. Bardzo ważne jest, aby pamiętać, aby zrozumieć działanie właściwości Float CSS.

Wyczyść funkcję dlarozwiązywanie problemów

Funkcja Float jest sercem jednego - Wyczyść. Razem nie są rozlaną wodą. Obie te funkcje wzajemnie się uzupełniają i sprawiają, że programista jest szczęśliwy. Jak wspomniano powyżej, sąsiednie elementy wychodzą z normalnego przebiegu i również zaczynają się unosić jak element, do którego zastosowano właściwość Float (na przykład CSS Float Top). W rezultacie zamiast jednego elementu pływającego wychodzą dwa, a nie w miejscu, w którym zamierzali umieścić programistę. Odtąd wszystkie problemy dopiero się zaczynają.
Funkcja Wyczyść ma pięć wartości:

: lewa;

: w prawo;

: oba;

: dziedziczą;

brak;

Analogicznie można zrozumieć, kiedy najlepiej zastosować funkcję Clear. Jeśli mamy napis napisany w Float: right; (Kod CSS ma na myśli) to funkcja powinna być klarowna: prawidłowa ;. To samo dotyczy właściwości Float: left; dopełnienie będzie jasne: w lewo; . Podczas pisania kodu Wyczyść: oba; okazuje się, że element, do którego ta funkcja jest stosowana, znajdzie się poniżej elementów, do których stosowana jest funkcja Float. Funkcja Inherit przyjmuje konfigurację elementu rodzica, a żadna nie wprowadza żadnych zmian w strukturze witryny. Jeśli zrozumiesz, jak działa Float i Clear, możesz napisać unikatowy i nietypowy kod pływacki HTML i CSS, który uczyni Twoją witrynę wyjątkową w swoim rodzaju.

Używanie Float do tworzenia kolumn

Funkcja Float jest szczególnie przydatna podczas tworzenia kolumn na stronie (lub umieszczania CSS w środkowej części strony internetowej). Ten kod jest najbardziej praktyczny i wygodny, warto więc rozważyć kilka opcji tworzenia zwykłegoszablon strony składający się z dwóch kolumn. Weźmy na przykład standardową witrynę internetową z treścią po lewej stronie, pasek nawigacji po prawej stronie, nagłówek i stopkę. Kod będzie następujący: Teraz trzeba zrozumieć, co tu jest napisane. Element nadrzędny, który zawiera większość kodu html, nazywany jest kontenerem. Pozwala nie podawać elementów, które są używane z funkcją Float, podzielonymi na różne kierunki. Gdyby tak nie było, elementy te spłynęłyby do granic samej przeglądarki. Następnie kod #content i #navigation znajdują się w kodzie. Te elementy używają funkcji Float. #content jest wysyłane po lewej stronie, a #navigation idzie w prawo. Jest to konieczne, aby utworzyć witrynę z dwiema kolumnami. Pamiętaj, aby określić szerokość, aby obiekty nie nakładały się na siebie. Szerokość może być również określona w procentach. Jest to wygodniejsze niż w pikselach. Na przykład: 45% dla #content i 45% dla #navigation, a pozostałe 10% dla właściwości depozytu zabezpieczającego. Właściwość Wyczyść znajdująca się pod adresem #footer nie zezwala stopce na podążanie za #navigation i #content, ale pozostawia ją w tym samym miejscu co ona. Co może się stać? jeśli nie określisz opcji Wyczyść? W tym kodzie #footer po prostu podnosi się i pojawia się pod #navigation. Stanie się tak, ponieważ #navigation ma wystarczająco dużo miejsca, aby umieścić inny przedmiot. To jest bardzo dobry przykład wyraźnie pokazuje, jak właściwości Pogodne Float komplementarne.

Kłopoty mogą pojawić się podczas pisania kodu

Powyższe przykłady są dość proste. Ale mogą być z nimi problemy. Ogólnie rzecz biorącw rzeczywistości wiele nieoczekiwanych problemów może się zdarzyć w przypadku funkcji Float. Nie byłoby to dziwne, ale problemy zwykle pojawiają się nie w CSS, ale w kodzie HTML. Miejsce, w którym znajduje się element z funkcją Float w kodzie HTML, bezpośrednio wpływa na pracę tego ostatniego. Aby uniknąć różnego rodzaju trudności, najlepiej przestrzegać prostej zasady - najpierw umieszczać elementy z funkcją Float w kodzie. Niemal zawsze działa i minimalizuje ich nieoczekiwane zachowanie.

Kolizja elementów

Kolizja występuje, gdy element nadrzędny zawierający kilka córek nie może zmieścić się w nich wszystkich i nakładają się one na siebie. Zdarza się nawet, że elementy mogą się nie pojawiać, ale znikają z witryny. To nie jest błąd przeglądarki, ale wyczekiwane i właściwe zachowanie elementów z funkcją Float. Z uwagi na to, że elementy te są początkowo w normalnym trybie, a następnie naruszają właściwość Float, przeglądarka może je usunąć ze strony witryny. Nie powinieneś jednak rozpaczać, ponieważ rozwiązanie jest proste i jasne - użyj własności Cear. Możliwe, że Clear jest najskuteczniejszym sposobem na wyjście z tego problemu. Ale problem kolizji elementów strony internetowej można rozwiązać w inny sposób. Istnieją co najmniej dwa inne sposoby:

za pomocą funkcji Position;

Aplikacja Flexbox.

Funkcja pozycji jest dobrą alternatywą dla CSS Float. W centrum strony, w przypadku pozycji, najlepiej jest ustawić obraz. Jeśli poprawnie zastosujesz wartość: bezwzględna: względna, elementy zostaną umieszczone na swoim miejscu i nie będąnałożone na siebie nawzajem.

Analiza kodu funkcji Position i Float

Warto bardziej szczegółowo zbadać, jak zamienić kod HTML i CSS Float na Position. W rzeczywistości jest to bardzo proste. Załóżmy, że istnieje element #container i #div. #container {width: 40%; float: left; margines: 10 pikseli; } #div {width: 40%; float: right; margines: 10 pikseli; } #footer {clear: both; } W tym przykładzie użycie drugiej funkcji kontenerowej (CSS Div) Float pomoże utworzyć standardową dwukolumnową witrynę. Nigdy nie zapominaj o funkcjach Clear. Bez tego wyłoni się tylko nakładka elementów na siebie. Jak więc zmienić kod CSS i Float, aby używać Postion? To bardzo proste: #container {width: 40%; pozycja: względna; margines: 10 pikseli; } #div {width: 40%; pozycja: względna; margines: 10 pikseli; } W takim przypadku #container i #div zaakceptują pozycję programisty w elemencie nadrzędnym. Najważniejsze? Umieść #div i #container w jednym elemencie nadrzędnym, który pasuje do ich rozmiaru.

Flexbox - W jaki sposób ta funkcja pomaga zastąpić CSS Float?

Flexbox to obecnie najbardziej zaawansowany sposób tworzenia stron internetowych, więc ta funkcja nie jest obsługiwana przez starsze przeglądarki. Tego faktu nie należy lekceważyć, ponieważ użytkownicy z nieaktualnymi wersjami przeglądarek nie będą mogli zobaczyć poprawnej wersji strony. Flexbox nie jest właściwością, ale oddzielnym modułem. Dlatego Flexbox obsługuje wiele właściwości, które działają tylko z nim. Ponadto na wyświetlaczu funkcji, który ma trzy parametry wbudowane, blokowe i wbudowane w flexbox, istnieje tylko jeden przepływ elastyczny.

Jak działa Flexbox?

Ta technologia pomoże programistom łatwo dopasowywać elementy w poziomie i w pionie. Ponadto Flexbox może zmieniać kierunek i kolejnośćwyświetlanie przedmiotów. Ta technologia ma dwie osie: oś główną i oś poprzeczną, wokół której zbudowany jest cały Flexbox. Usuwa również funkcję Float i Clear. Buduje swój system w kodzie, który wykorzystuje tylko jego właściwości, więc niestety nie będzie on mógł duplikować innych właściwości w elementach, takich jak Float i Position. I to byłoby bardzo, ponieważ, jak wspomniano powyżej, Flexbox działa tylko w nowych wersjach przeglądarek. Warto pamiętać, że w końcu pozycja, Flexbox i Float robią to samo - tworzą nietypowy i oryginalny wygląd witryny. Każda opcja w artykule robi to na swój sposób i dlatego ma zarówno zalety, jak i wady. Co więcej, Float (na przykład strona o prostej strukturze) jest gdzieś świetny i lepiej jest gdzieś użyć Position lub Flexbox.

Podwójny błąd marży

Czasami jednak niestety, każdy programista napotyka problemy niezwiązane z pisanym kodem, ale z błędami w jakimś szczególnym rodzaju przeglądarki. Na przykład w Internet Explorerze występuje błąd o nazwie Double Margin Bug. Mnoży parametr Margin o dwa, co powoduje przesunięcie elementów witryny poza przeglądarką. Aby tego uniknąć, wystarczy podać parametr Margin w procentach. Zwykle ten błąd występuje, gdy wartości we właściwościach Margin i Float są takie same. #div {float: left; margin-left: 10px; } Ten kod przenosi element w przeglądarce Internet Explorer o 20 pikseli w lewo. Możesz zmienić kod: #div {float: left; margin-left: 10%; } lub tak, #div {float: left; margin-right: 10px; } Obie te opcje rozwiążą problem z promowaniem elementów.

Błędy przeglądarki i nieprawidłowe mapowanie strony

Warto pamiętać, że Internet Explorer nie jest jedyną przeglądarką, która może zawierać błędy. Starsze wersje Google Chrome i Mozilli również niepoprawnie odzwierciedlają niektóre elementy współczesnych stron internetowych. Dla każdego z tych błędów możesz znaleźć rozwiązanie. Ogólnie chciałbym zauważyć, że użycie Float stworzy oryginalny i atrakcyjny wygląd strony. Zrozumienie podstaw i zasad tej funkcji pozwoli uniknąć błędów i ułatwi życie każdemu programistom.