Ostatnia aktualizacja 15 grudnia, 2023
Float to właściwość CSS, która pozwala na umieszczanie elementów w taki sposób, aby tekst i inne elementy “pływały” wokół nich. Używa się jej często do tworzenia układów stron internetowych, gdzie obrazy lub bloki tekstu mogą być umieszczone obok siebie w harmonijny sposób.
- Podstawowe zastosowanie float to umieszczanie elementów obok siebie, zamiast w pionie, przez ustawienie
floatnaleftlubright. - Technika “clearing float” stosowana jest do zapobiegania nieoczekiwanym zachowaniom elementów następujących po elemencie z float.
- Alternatywy dla elementu float to flexbox i grid.
CSS float. Podstawowe zastosowanie
Głównym zastosowaniem float jest umożliwienie elementom HTML (divy, obrazy lub paragrafy) znajdowania się obok siebie, zamiast jeden pod drugim, co jest domyślnym zachowaniem blokowym w HTML. Można to zrealizować poprzez ustawienie właściwości float na wartość left lub right.
Obraz z tekstem obok
img {
float: left;
margin-right: 15px;
}W tym przykładzie obrazy w dokumencie HTML będą “pływać” po lewej stronie, a tekst automatycznie dostosuje się, aby otaczać obraz z prawej strony.
Clearing float
Jednym z problemów, które mogą się pojawić podczas używania float, jest nieoczekiwane zachowanie innych elementów następujących po elemencie z właściwością float. Aby temu zaradzić, używa się techniki zwanej “clearing float”.
.clearfix {
clear: both;
}Jeśli mamy element, który chcemy umieścić poniżej elementów z float, możemy dodać do niego klasę .clearfix. Zapobiegnie to “zachodzeniu” elementu na obszar zajmowany przez float.
CSS float a responsywność
Float nadaje się również do użycia w responsywnych projektach stron internetowych. Możemy zmieniać zachowanie float w zależności od szerokości ekranu urządzenia.
@media screen and (max-width: 600px) {
img {
float: none;
}
}W tym przykładzie dla ekranów o szerokości mniejszej niż 600px, obrazy nie będą “pływać”, lecz będą zajmować całą dostępną szerokość.
Dalsza część tekstu znajduje się pod materiałem wideo:
CSS float a alternatywy
Float był niegdyś podstawowym narzędziem do tworzenia układów stron internetowych. Dzisiaj istnieją też bardziej nowoczesne techniki, m.in. Flexbox czy Grid. Oferują one większą kontrolę i elastyczność w projektowaniu układów. Float jest jednak nadal użyteczny i znajduje swoje zastosowanie w wielu sytuacjach.
Flexbox
Flexbox, czyli Flexible Box Layout, to system projektowania układów, który pozwala na łatwe ustawianie elementów w jednym wymiarze (poziomym lub pionowym). Jest idealny do tworzenia układów responsywnych, ponieważ pozwala elementom na dostosowywanie swoich rozmiarów i pozycji w zależności od dostępnej przestrzeni.
.container {
display: flex;
justify-content: space-between;
align-items: center;
}Jak widać powyżej, elementy wewnątrz .container zostaną rozmieszczone równomiernie w poziomie, z automatycznym dopasowaniem przestrzeni między nimi. Dodatkowo, będą wyśrodkowane w pionie.
Grid
Grid Layout to jeszcze bardziej zaawansowany system projektowania układów, który pozwala na tworzenie złożonych struktur dwuwymiarowych. Jest to idealne rozwiązanie dla projektów wymagających precyzyjnego rozmieszczenia elementów w siatce.
.grid-container {
display: grid;
grid-template-columns: auto 1fr auto;
grid-gap: 10px;
}W tym układzie mamy trzy kolumny, z których środkowa dostosowuje swoją szerokość do dostępnej przestrzeni, a dwie pozostałe mają szerokość dostosowaną do zawartości. Dodatkowo, grid-gap dodaje odstępy między kolumnami.
Czytaj także:
