CSS Float: opis, właściwości

Float - jedna z podstawowych funkcji języka CSS(Kaskadowe arkusze stylów - formatowanie tabel kaskadowych). Ten język istnieje od 1996 roku i nadal się rozwija. Obecnie programiści używają trzeciej wersji CSS. Korzystając z języka programowania CSS, można stworzyć całkowicie piękną i przyjemną stronę internetową, która nie będzie wydawać się przestarzała lub niewygodna dla użytkownika, nawet jeśli w ogóle nie będziesz używać javascript. Nowoczesne funkcje trzeciej wersji pozwalają to zrobić.

Ponadto programiści mogą używać więcejwygodne opcje formatowania, takie jak Flexbox lub Position do zmiany miejsca elementu na stronie, ale przede wszystkim. Najpierw musisz zrozumieć zalety i wady właściwości Float.

CSS Float - dlaczego jest potrzebny?

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óre bardzo starannie je oplatają. W świecie kodów HTML i CSS podczas korzystania z funkcji float powinnyto samo się dzieje. Warto jednak pamiętać, że edycja obrazów nie zawsze jest głównym celem tej funkcji. Można go użyć do stworzenia popularnego układu elementów witryny w dwóch, trzech, czterech kolumnach. W rzeczywistości właściwość Float CSS dotyczy niemal każdego elementu HTML. Znając podstawy edycji układu elementów za pomocą funkcji Float, a następnie Property, stworzenie dowolnego projektu strony internetowej nie będzie trudne.

Czasami mogą to robić specjalne programy układunie zauważaj obrazów, ale idź na nie. Całkiem podobne rzeczy dzieją się również w projektowaniu stron internetowych, biorąc pod uwagę, że tekst zamiast przeszukiwania obrazu jest wyświetlany (jeśli właściwość Float jest niepoprawnie zastosowana) obok lub pod nim, ale nie zawsze tam, gdzie jest potrzebny deweloper.

CSS Float Właściwość Opis

W rzeczywistości możliwość korzystania z nieruchomościFloat to bardzo dobry as w rękawie dla każdego projektanta stron internetowych. Niestety brak zrozumienia, jak działa ta funkcja, może prowadzić do kolizji elementów witryny i innych rozczarowań tego rodzaju. Wcześniej podobne sytuacje występowały również z powodu błędów w przeglądarkach. Teraz ujawniony zostanie sekret prawidłowego korzystania z właściwości Float i nie będzie już z tym żadnych problemów.

Właściwość Float ma cztery wartości:

• Float: odziedziczony;
• Pływak: prawy;
• Pływak: lewy;
• Pływak: brak;

Dla tych, którzy znają angielski, wartości parametrów właściwości Float powinny być jasne. Ale dla tych, którzy nie wiedzą, można podać małe wyjaśnienie. Parametr : lewo; przesuwa ciało elementu do lewego skrajnego rogu elementu macierzystego. To samo dzieje się (tylko w przeciwnym kierunku) z parametrem bcgjkmpjdfybb : prawo;. Wartość : dziedziczyć; nakazuje elementowi przyjąć to samoustawienia jako rodzic. Takie elementy są również nazywane dziećmi, ponieważ znajdują się bezpośrednio wewnątrz elementu nadrzędnego w kodzie HTML. Właściwość : brak; pozwala elementowi nie zakłócać normalnego przepływu dokumentu, jest domyślnie ustawiony dla wszystkich części kodu.

Jak działa float?

Właściwość Float CSS działa po prostu. Wszystko, co zostało opisane powyżej, można wykonać bez większych trudności. Wtedy wszystko będzie tak samo proste. Ale przed dalszym badaniem właściwości Floata warto trochę zrozumieć teorię. Każdy element strony internetowej jest blokiem. Łatwo to zweryfikować, otwierając konsolę w Google Chrome, naciskając Ctrl + Shift + J. Tekst, tytuł, obraz, linki i wszystkie inne elementy witryny będą wyświetlane w blokach o różnych rozmiarach. Początkowo wszystkie te bloki idą jedna po drugiej. Jak widać w poniższym przykładzie, wiersze kodu idą jeden po drugim, dlatego będą wyświetlane ściśle jeden po drugim.

Nazywa się to przepływem normalnym. Przy takim przepływie wszystkie bloki leżą jedna na drugiej (bez przekraczania brył elementu) pionowo. Początkowo cała zawartość strony internetowej jest zlokalizowana w ten sposób. Ale podczas korzystania na przykład z właściwości języka CSS Float Left, element pozostawia swoją naturalną pozycję na stronie i przesuwa się do pozycji skrajnie lewej. Takie zachowanie nieuchronnie prowadzi do zderzenia z tymi elementami, które pozostały w normalnym trybie.

Innymi słowy, zamiast tego elementyumieszczone pionowo, są teraz obok siebie. Jeśli element nadrzędny ma wystarczająco dużo miejsca, aby mógł umieścić w nim dwoje dzieci, wówczas nie ma kolizji; jeśli nie, wówczas nakładanie się jednego obiektu na drugi jest nieuniknione. Jest to niezwykle ważne, aby pamiętać, aby zrozumieć, jak działa właściwość CSS Float.

Przejrzysta funkcja rozwiązywania problemów

Funkcja Float ma przyjaciela serca - Clear. Razem nie rozlewają wody. Obie te funkcje wzajemnie się uzupełniają i sprawiają, że deweloper jest szczęśliwy. Jak wspomniano powyżej, sąsiednie elementy wychodzą z normalnego przepływu i również zaczynają „unosić się”, podobnie jak element, do którego zastosowano właściwość Float (na przykład CSS Float Top). W rezultacie zamiast jednego elementu pływającego uzyskuje się dwa, a wcale nie w miejscu, w którym deweloper zamierzał je umieścić. Od tego momentu zaczynają się wszystkie problemy.

Funkcja Clear ma pięć wartości:

• : lewo;
• : prawo;
• : oba;
• : dziedziczyć;
• brak;

Analogicznie możesz zrozumieć, kiedy najlepiej jest użyć funkcji Clear. Jeśli napisaliśmy wiersz w kodzie Pływak: prawy; (Kod CSS oznacza), wtedy funkcja powinna być Wyczyść: racja; Ta sama rzecz kołysze się i ma właściwości Pływak: lewy; uzupełni to Wyczyść: w lewo;. Podczas pisania kodu Wyczyść: oba; okazuje się, że element, którego dotyczyta funkcja będzie znajdować się poniżej elementów, do których zastosowano funkcję Float. Dziedziczenie pobiera ustawienia z elementu nadrzędnego i żadne nie wprowadza żadnych zmian w strukturze witryny. Jeśli rozumiesz, jak działają funkcje Float i Clear, możesz napisać wyjątkowy i niezwykły HTML i zmiennoprzecinkowy CSS, aby Twoja strona była jedyna w swoim rodzaju.

Używanie pływaka do tworzenia kolumn

Właściwość Float jest szczególnie przydatna podczas tworzeniakolumny w witrynie (lub środek zawartości CSS Float na stronie internetowej). Taki kod jest najbardziej praktyczny i wygodny, dlatego warto rozważyć kilka opcji tworzenia znanego dwukolumnowego szablonu witryny. Weźmy na przykład standardową stronę internetową z treścią po lewej stronie, paskiem nawigacji (po prawej), nagłówkiem i stopką. Kod będzie taki:

Teraz musisz dowiedzieć się, co tu jestjest napisane. Element nadrzędny, który zawiera większość kodu HTML, jest nazywany kontenerem. Pozwala zapobiegać elementom, do których zastosowano funkcję Float, rozpraszać w różnych kierunkach. Gdyby tak nie było, elementy te unosiłyby się do granic przeglądarki.

Następnie w kodzie są #content i #navigation. Funkcja Float ma zastosowanie do tych elementów. #content idzie w lewo, a #navigation idzie w prawo. Jest to konieczne, aby utworzyć witrynę z dwóch kolumn. Należy określić szerokość, aby obiekty nie nakładały się na siebie. Szerokość może być również określona w procentach. Jest to nawet wygodniejsze niż w pikselach. Na przykład 45% dla #content i 45% dla #navigation, a pozostałe 10% do własności marginesu.

Właściwość Clear, która znajduje się w #footer, nie jestpozwala stopce śledzić #navigation i #content, i pozostawia ją w tym samym miejscu, w którym była. Co może się stać? chyba że określisz właściwość Clear? W tym kodzie #footer po prostu pójdzie w górę i znajdzie się pod #navigation. Stanie się tak, ponieważ #navigation ma wystarczająco dużo miejsca, aby pomieścić inny element. Ten ilustrujący przykład pokazuje bardzo wyraźnie, w jaki sposób właściwości Clear i Float wzajemnie się uzupełniają.

Problem z pisaniem kodu

Powyższe przykłady są dość proste. Ale mogą być z nimi problemy. Zasadniczo w rzeczywistości może wystąpić wiele nieoczekiwanych problemów z funkcją Float. Choć może się to wydawać dziwne, problemy zwykle nie pojawiają się w CSS, ale w kodzie HTML. Miejsce, w którym element z funkcją Float znajduje się w kodzie HTML, wpływa bezpośrednio na działanie tego ostatniego. Aby uniknąć różnego rodzaju trudności, najlepiej postępować zgodnie z prostą regułą - umieszczać elementy z funkcją Float najpierw w kodzie. Prawie zawsze działa to i minimalizuje ich nieoczekiwane zachowanie.

Zderzenie elementów

Zderzenie następuje, gdy rodzicelement zawierający kilka dzieci nie może zawierać ich wszystkich i nakładają się na siebie. Zdarza się nawet, że elementy mogą nie być wyświetlane, ale znikają z witryny. To nie jest błąd przeglądarki, ale raczej oczekiwane i prawidłowe zachowanie elementów z funkcją Float.

Ze względu na fakt, że te elementy są pierwsze wnormalny przepływ, a następnie zostaje naruszony przez właściwość Float, przeglądarka może usunąć je ze strony witryny. Nie rozpaczaj, ponieważ rozwiązanie jest proste i jasne - użyj właściwości Cear. Możliwe, że ze wszystkich sposobów rozwiązania tego problemu użycie Clear jest najbardziej skuteczne.

Ale problem kolizji elementów strony internetowej można rozwiązać w inny sposób. Istnieją co najmniej dwa dodatkowe sposoby:

• za pomocą funkcji położenia;
• Aplikacja Flexbox.

Funkcja pozycji jest czasami dobra.alternatywa dla CSS float. Podczas korzystania z pozycji najlepiej jest umieszczać obrazy na środku strony. Jeśli poprawnie zastosujesz wartości: bezwzględną i: względną, wówczas elementy opadną na miejsce i nie będą się na siebie nakładać.

Pozycja parsowania i kod funkcji pływaka

Warto bardziej szczegółowo zrozumieć, jak w kodzie HTML i CSS Float zamień na Position. To jest naprawdę bardzo proste. Załóżmy, że istnieje element #container i #div.

#container {

szerokość: 40%;

float: left;

margines: 10 pikseli;

}

#div {

szerokość: 40%;

float: prawo;

margines: 10 pikseli;

}

#footer {

jasne: oba;

}

W tym przykładzie użyj w drugimFloat Funkcje kontenera (CSS Div) pomaga stworzyć standardową witrynę dwukolumnową. Nigdy nie zapomnij o funkcji Clear. Bez niego powstanie tylko superpozycja elementów na sobie.

Jak zatem zmienić kod CSS i zmiennoprzecinkowy, aby używać Postion? Bardzo proste:

#container {

szerokość: 40%;

pozycja: względna;

margines: 10 pikseli;

}

#div {

szerokość: 40%;

pozycja: względna;

margines: 10 pikseli;

}

W takim przypadku #container i #div zaakceptująpozycja programisty w elemencie nadrzędnym. Najważniejsze? umieść #div i #container w jednym elemencie nadrzędnym, który będzie pasował do ich rozmiarów.

Flexbox - jak ta funkcja pomaga zastąpić CSS Float?

Flexbox to najbardziej zaawansowany sposób tworzeniawitryny w tej chwili, więc ta funkcja nie jest obsługiwana przez starsze wersje przeglądarek. Tego faktu nie należy lekceważyć, ponieważ użytkownicy z nieaktualnymi wersjami przeglądarek nie będą mogli zobaczyć poprawnej wersji witryny.

Flexbox nie jest własnością, ale osobnymmoduł Dlatego Flexbox obsługuje wiele właściwości, które działają tylko z nim. Ponadto funkcja wyświetlania, która ma trzy parametry: inline, block i inline-block w flexbox, ma tylko jeden flex-flow.

Jak działa Flexbox?

Ta technologia z łatwością pomoże programistom.wyrównaj elementy w poziomie i w pionie. Flexbox może także zmieniać kierunek i kolejność wyświetlania przedmiotów. Ta technologia ma dwie osie: oś główną i oś poprzeczną, wokół których jest zbudowany cały Flexbox. Usuwa również efekt funkcji Float i Clear. Buduje swój system w kodzie, w którym używa unikalnych dla niego właściwości, dlatego niestety nie będzie mógł powielać innych właściwości w elementach, takich jak Float i Position. Byłoby to bardzo pomocne, ponieważ, jak wspomniano powyżej, Flexbox działa tylko w nowszych wersjach przeglądarek.

Warto pamiętać, że ostatecznie pozycja,Flexbox i Float robią to samo - tworzą niezwykły i oryginalny wygląd Twojej witryny. Każda z opcji rozważanych w tym artykule robi to na swój sposób, a zatem ma zarówno zalety, jak i wady. Ponadto zdarza się, że gdzieś funkcja Float będzie działać dobrze (na przykład w witrynie o prostej strukturze), ale gdzieś lepiej jest użyć Position lub Flexbox.

Błąd podwójnego marginesu

Czasami jednak niestety wszyscyDeweloper ma problemy związane nie z pisanym kodem, ale z błędami w określonej formie przeglądarki. Na przykład w przeglądarce Internet Explorer występuje błąd o nazwie Błąd podwójnej marży. Mnoży parametr Margin przez dwa, co prowadzi do przesunięcia elementów witryny poza granice przeglądarki. Aby tego uniknąć, wystarczy podać parametr Margin w procentach. Zwykle ten błąd występuje, gdy wartości właściwości Margin i Float są zgodne.

#div {

float: left;

margines lewy: 10px;

}

Taki kod przesunie element w Internet Explorerze o 20 pikseli w lewo. Możesz zmienić kod w następujący sposób:

#div {

float: left;

margines lewy: 10%;

}

lub tak

#div {

float: left;

margines z prawej: 10 pikseli;

}

Obie te opcje rozwiążą problem przemieszczenia elementów.

Błędy przeglądarki i nieprawidłowe wyświetlanie witryny

Warto pamiętać, że Internet Explorer nie jestjedyna przeglądarka, w której mogą wystąpić błędy. Starsze wersje Google Chrome i Mozilla również nieprawidłowo wyświetlają niektóre elementy współczesnych stron internetowych. Możesz znaleźć rozwiązanie dla każdego z tych błędów. Ogólnie rzecz biorąc, chcę zauważyć, że użycie Float stworzy oryginalny i atrakcyjny projekt strony. Zrozumienie podstaw i zasad tej właściwości pozwoli uniknąć błędów i ułatwi życie każdemu deweloperowi.