W tym przypadku omówimy dwa najczęstsze problemy występujące podczas używania właściwości float do utworzenia układu.
Dla tych z Was, którzy są nowicjuszami w CSS, Float jest właściwością CSS, która pozwala wyrównać elementy, takie jak DIV, w celu stworzenia layoutów strony. Wartości dla Float obejmują Left, Right i None. Możesz użyć Floats do wyrównania elementów, a jeśli zrobisz to poprawnie, możesz zrobić to w taki sposób, że jest dynamiczny - prawie płynny.
Załóżmy, że musisz utworzyć galerię obrazów. Twoim pomysłem jest umieszczenie 4 obrazów na każdej linii, ale po umieszczeniu pierwszego obrazu drugi obraz przechodzi do następnej linii.
CSS Tricks: Rozwiązano problemy CSS
Przyznaję, że w przeszłości używałam wartości ujemnych, aby wyrównać moje obrazy, aby drugi obraz był wyświetlany obok pierwszego za pomocą właściwości lewa, prawa, góry i dołu. Rozważałem nawet używanie tabel, ale zdecydowałem się zamiast tego używać ujemnych wartości. Nie ma nic złego w korzystaniu z ujemnej właściwości marginesu, ale nie wtedy, gdy jest na to lepsze rozwiązanie, takie jak używanie pływaków.
Jeśli zastosujesz funkcję Float do tych obrazów, to wyrównają one w jednym wierszu, a następnie możesz dodawać kolejne obrazy za pomocą właściwości float i nie musisz się martwić o to, czy będą ustawione w linii, czy nie, ponieważ właściwość float będzie rozpoznaje, że w tej linii jest zbyt wiele elementów, które przesuwają obrazy do następnej linii.
Ale co, jeśli używasz Floats do układu strony, dla twoich div, a nie tylko obrazów.
Są 2 główne problemy, z którymi napotkasz Floats.
Załóżmy, że masz trzy elementy. Parent1 (główny kontener witryny), Child1 (lewy pasek nawigacji) i Child2 (obszar zawartości). Parent1 jest głównym kontenerem div, a Twoim celem jest unoszenie elementów div obok siebie, podobnie jak w przypadku lewego obszaru nawigacji i prawego obszaru zawartości. Brzmi wspaniale.
Ustawiłeś wysokość swojego parent1 na auto i ustawiłeś wysokość child1 i child2 jako auto. Jednak po otwarciu i wyświetleniu na stronie internetowej wysokość elementu rodzica jest równa 1 lub 2 pikselom, elementy potomne wydają się wyglądać tak, jakby były unoszące się nad kontenerem nadrzędnym, a pojemnik nadrzędny nie rozpoznaje elementu div. wysokość. (patrz link testowy 1 na stronie internetowej).
Bez obaw, oto proste rozwiązanie.
Dodaj przepełnienie: auto; dla CSS kontenera nadrzędnego i automatycznie rozpoznaje zmienne i zwiększy wysokość, aby okazało się, że elementy pływające są częścią kontenera nadrzędnego dokładnie tak, jak chciałeś. Wow to wszystko w jednym wierszu.
Ale nie zapominaj, że jest jeszcze jeden problem z Float.
Drugi problem to raczej problem z kompatybilnością z przeglądarkami, ale nadal jest tak samo ważny. Jeśli spróbujesz wykonać Float dla przykładu: trzy obrazy po lewej stronie i używają właściwości marginesu, to czasami pierwszy kontener, który się unosi, podwoi margines w Internet Explorerze.
Witajcie w grze Float Peekaboo Bug / IE Float Doubled Margin Bug.
To prawda, jeśli próbowałeś przelać element i użyć dowolnego marginesu, wtedy zauważysz, że podwoi to margines w IE.
Jestem pewien, że istnieje kilka przyzwoitych hacków, ale istnieje prosty sposób na naprawienie tego w CSS. The Float Margin Killer. W CSS dla tego kontenera dodać wyświetlacz: wbudowany Nie wiem dlaczego, ale z jakiegoś powodu ta właściwość wydaje się naprawić właściwość podwójnego marginesu.
To jest to? Tak, to jest to. Teraz możesz zacząć używać pływaków.