Właściwość CSS jest bardzo ważną właściwością układu. Pozwala na umieszczanie projektów stron internetowych dokładnie tak, jak chcesz, aby były wyświetlane - ale aby z niego skorzystać, musisz zrozumieć, jak to działa.
W arkuszu stylów właściwości float CSS wygląda następująco:
.right {float: right; }
To mówi przeglądarce, że wszystko z klasą "prawo" powinno być wypuszczone w prawo.
Przypisałbyś to tak:
class = "right" />
Co można pływać z właściwością pływaka CSS?
Nie możesz unosić każdego elementu na stronie internetowej. Możesz przenosić tylko elementy blokowe. Są to elementy, które zajmują blok miejsca na stronie, jak images (), paragraph (), divisions () i lists ().
Inne elementy, które wpływają na tekst, ale nie tworzą ramki na stronie, są nazywane elementami śródliniowymi i nie można ich przenosić. Są to elementy takie jak span (), break line (), strong emphasis () lub kursywa ().
Gdzie się spławią?
Możesz unosić elementy po prawej lub po lewej stronie. Każdy element następujący po płynącym elemencie przepłynie wokół pływającego elementu po drugiej stronie.
Na przykład, jeśli unoszę obraz po lewej stronie, tekst lub inne elementy, które go śledzą, przepłyną wokół niego po prawej stronie. A jeśli unoszę obraz po prawej stronie, tekst lub inne elementy, które go śledzą, przepłyną w lewo. Obraz umieszczony w bloku tekstu bez zastosowanego do niego stylu swobodnego wyświetli jednak przeglądarkę ustawioną na wyświetlanie obrazów. Zazwyczaj jest to pierwszy wiersz następującego tekstu wyświetlanego u dołu obrazu.
Jak daleko będą się spieszyć?
Element pływający przesunie się tak daleko w lewo lub w prawo od elementu kontenera, jak to tylko możliwe. Powoduje to kilka różnych sytuacji w zależności od tego, jak napisany jest twój kod. Dla tych przykładów będę unosić mały DIV element po lewej:
- Jeśli element pływający nie ma wstępnie zdefiniowanej szerokości, zajmie on tyle miejsca w poziomie, ile potrzeba i będzie dostępne, niezależnie od pływaka. Uwaga: niektóre przeglądarki próbują umieszczać elementy obok elementów pływających, gdy szerokość nie jest zdefiniowana - zwykle nadając elementowi niewypełnionemu tylko niewielką ilość miejsca. Powinieneś zawsze określ szerokość na elementach pływających.
- Jeśli elementem kontenerowym jest element HTML, pływający
DIVusiądzie na lewym marginesie strony. - Jeśli element pojemnika sam jest zawarty w czymś innym, pływa
DIVusiądzie na lewym marginesie pojemnika. - Możesz zagnieździć elementy pływające, co może spowodować, że pływak znajdzie się w zaskakującym miejscu. Na przykład ta zmienna jest lewostronna
DIVpo prawej stronie unosi sięDIV. - Elementy pływające będą siedzieć obok siebie, jeśli w pojemniku jest miejsce. Na przykład ten kontener ma trzy szerokości 100 pikseli
DIVelementy pływające w pojemniku o szerokości 400 pikseli.
Możesz nawet użyć pływaków do stworzenia układu galerii zdjęć. Każda miniatura (najlepiej działa, gdy mają taki sam rozmiar) umieszczasz w DIV z napisem i pływakiem DIV elementy w kontenerze. Bez względu na to, jak szerokie jest okno przeglądarki, miniatury będą się układać równomiernie.
Wyłączanie pływaka
Kiedy już wiesz, jak uzyskać element pływający, ważne jest, aby wiedzieć, jak wyłączyć pływak. Możesz wyłączyć float za pomocą właściwości CSS clear. Możesz wyczyścić lewe pływaki, prawe pływaki lub oba:
jasne: w lewo;jasne: prawe;oba czyste;
Każdy element, dla którego ustawiono właściwość clear, pojawi się poniżej elementu, który jest przemieszczany w tym kierunku. Na przykład w tym przykładzie pierwsze dwa akapity tekstu nie są usuwane, ale trzeci jest.
Graj z wyraźną wartością różnych elementów w dokumentach, aby uzyskać różne efekty układu. Jednym z najciekawszych układów pływających jest seria obrazów w prawej lub lewej kolumnie obok akapitów tekstu. Nawet jeśli tekst nie jest wystarczająco długi, aby przewinąć obok obrazu, możesz użyć wyraźnego na wszystkich obrazach, aby upewnić się, że pojawiają się one w kolumnie, a nie obok poprzedniego obrazu.
Kod HTML (powtórz ten akapit):
Duis aute irure dolor sed do eiusmod tempor incididunt w zastępstwie w voluptate. Cupidatat non proident, ut labore et dolore magna aliqua.
CSS (aby unosić obrazy po lewej):
img.float {float: left; jasne: w lewo; margines: 5 pikseli;}
A po prawej:
img.float {float: right; jasne: prawe; margines: 5 pikseli;}
Korzystanie z Floats dla układu
Kiedy zrozumiesz, w jaki sposób pływak własność działa, możesz zacząć z niej korzystać, aby rozłożyć swoje strony internetowe. Oto kroki, które podejmuję, aby utworzyć pływającą stronę internetową:
- Zaprojektuj układ (na papierze lub w narzędziu graficznym lub w mojej głowie).
- Określ, gdzie będą podziały strony.
- Określ szerokość różnych pojemników i znajdujących się w nich elementów.
- Float wszystko. Nawet najbardziej zewnętrzny element kontenera jest wypuszczany w lewo, dzięki czemu wiem, gdzie będzie on w stosunku do portu przeglądarki.
Dopóki znasz szerokości (procenty są w porządku) sekcji układu, możesz użyć pływak właściwość, aby umieścić je tam, gdzie należą na stronie. I fajne jest to, że nie musisz martwić się o to, że model pudełkowy jest inny dla Internet Explorera lub Firefoksa.
