Układ CSS - pływający i przejrzysty
Właściwość CSS floatokreśla sposób unoszenia się elementu.
Właściwość CSS clearokreśla, które elementy mogą unosić się obok wyczyszczonego elementu i po której stronie.
Nieruchomość pływaka
Właściwość floatsłuży do pozycjonowania i formatowania treści, np. niech obrazek unosi się w lewo do tekstu w kontenerze.
Właściwość floatmoże mieć jedną z następujących wartości:
-
left- Element unosi się na lewo od pojemnika -
right- Element unosi się na prawo od pojemnika -
none- Element nie pływa (będzie wyświetlany tylko tam, gdzie występuje w tekście). To jest domyślne -
inherit- Element dziedziczy wartość zmiennoprzecinkową swojego rodzica
W najprostszym zastosowaniu floatwłaściwość może być używana do owijania tekstu wokół obrazów.
Przykład - float: prawo;
Poniższy przykład określa, że obraz powinien unosić się w prawo w tekście:
Sam ból jest miłością, głównym systemem przechowywania. Phasellus imperdiet, nie i czasami mówiono, ale brak nienawiści Mecenas to fani, mściwi i nie gotujący, twórca masowego życia.
Przykład
img {
float: right;
}
Przykład - float: lewo;
Poniższy przykład określa, że obraz powinien unosić się w lewo w tekście:
Sam ból jest miłością, głównym systemem przechowywania. Phasellus imperdiet, nie i czasami mówiono, ale brak nienawiści Mecenas to fani, mściwi i nie gotujący, twórca masowego życia.
Przykład
img {
float: left;
}
Przykład — brak pływaka
W poniższym przykładzie obraz zostanie wyświetlony dokładnie tam, gdzie występuje w tekście (float: none;):
Sam ból jest miłością, głównym systemem przechowywania. Phasellus imperdiet, nie i czasami mówiono, ale brak nienawiści Mecenas to fani, mściwi i nie gotujący, twórca masowego życia.
Przykład
img {
float: none;
}
Przykład — unosić się obok siebie
Normalnie elementy div będą wyświetlane jeden na drugim. Jeśli jednak użyjemy float: left, możemy pozwolić elementom unosić się obok siebie:
Przykład
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}