Zwróćmy uwagę na wady pływaka. Jak elementy blokowe i wbudowane zachowują się względem siebie i czy używać ich razem. Przeanalizujmy czym jest strata i jak sobie z nią radzić.
Pomimo tego, że w ostatnim artykule zbudowaliśmy prostą siatkę dla strony za pomocą pływaków, pierwotnie mają one na celu dostosowanie przepływu elementów w tekście. Float ma trzy znaczenia: left - elementy przyklejają się do lewego marginesu; prawy - elementy są dociskane do prawej krawędzi; none - tryb owijania jest wyłączony.
Element z zawijaniem zmiennoprzecinkowym może być dopasowywany i uzupełniany, ale jeśli element jest wbudowany, będzie zachowywał się jak element blokowy.
.blok1 {
pływak: lewy;
szerokość: 150px;
}
.blok2 {
pływak: w prawo;
szerokość: 150px;
}
Przy korzystaniu ze spławików pojawia się inny problem, który wypada ze strumienia. Pojawia się, gdy klocki idą jeden po drugim, ale tylko jeden z nich ma właściwość float, wtedy będzie nad resztą, ponieważ nie widzi innych bloków. Elementy śródliniowe będą zawijać się wokół elementów pływających, ale blok zawierający ten tekst pozostanie pod elementem pływającym.
Ale jak pływak oddziałuje z pływakiem?
Zachowują się jak tekst: stoją jeden po drugim, dopóki jest wolne miejsce, a następnie przechodzą do nowej linii. Dlatego za pomocą pływaków zaczęliśmy budować siatki. Jeśli nie ma już miejsca, zostają przesunięte poza szerokość witryny, to znaczy nigdzie nie idą.
Jeśli pływak nie widzi prostych elementów blokowych, można nauczyć je widzieć pływak. Korzystamy z właściwości clear, która wyłącza zawijanie ze wszystkich stron (lub z wybranych). Oznacza to, że element z przezroczystym wpadnie pod element z pływakiem.
