Unoszący się element HTML
- Data publikacji
- Ostatnio edytowano
W jednej z poprzednich części tego kursu CSS poznaliśmy elementy HTML, które miały w sobie cechy elementu blokowego (display:block;). Wspomniane elementy blokowe mają w sobie pewne domyślne właściwości, np. są wyświetlane jeden pod drugim, ich szerokość jest taka sama jak szerokość ich elementu rodzica.
W tej części kursu CSS dowiemy się w jaki sposób sprawić, aby blokowy element HTML stał się elementem unoszącym się w lewą lub prawą stronę.
Poniżej zostały wyświetlone trzy blokowe elementy div, do których zostały dodane właściwości CSS, które już poznaliśmy, w poprzednich częściach tego kursu CSS.
Kod dokumentu HTML nie zawiera w sobie niczego szczególnego:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
#pierwszy {
background-color:lightblue;
padding:15px;
margin:15px;
}
#drugi {
background-color:lightgreen;
padding:45px 15px;
margin:15px;
}
#trzeci {
background-color:tomato;
padding:45px 15px;
margin:15px;
}
</style>
</head>
<body>
<div id="pierwszy">pierwszy element - div</div>
<div id="drugi">drugi element - div</div>
<div id="trzeci">trzeci element - div</div>
</body>
</html>
Spójrzmy co się stanie z naszym przykładowym elementem HTML, gdy dodamy do niego właściwość float wraz z wartością left. Wspomnianą właściwość float:left; dodajemy do elementu #pierwszy.
Po dodaniu do blokowego elementu HTML właściwości float wraz z wartością left lub right, element HTML otrzymuje cechę elementu unoszącego się. Jeżeli podamy wartość left to element HTML będzie unosił się w lewą stronę, natomiast jeżeli podamy wartość right to element HTML będzie unosił się w prawą stronę. Unoszący się element HTML będzie unosił się w stronę krawędzi swojego elementu rodzica (do góry w lewo lub do góry w prawo).
W naszym przykładzie, element #pierwszy unosi się nad sąsiednim elementem HTML, w lewą stronę, ponieważ została do niego dodana właściwość float wraz z wartością left. Taki unoszący się element HTML posiada w sobie kilka dodatkowych cech. Jego szerokość jest zależna od jego zawartości (chyba, że ustalimy dla niego inną szerokość za pomocą właściwości width).
Jednak najważniejszą dodatkową cecha elementu unoszącego się, jest fakt, że obszar elementu HTML, który występuje w kodzie HTML za elementem unoszącym się, jest umieszczany pod elementem unoszącym się, bez zawartości, ponieważ zawartość takiego elementu HTML jest umieszczana obok lewej, prawej lub dolnej krawędzi elementu unoszącego się (w zależności od sytuacji), co możemy zaobserwować w przykładzie, który został umieszczony poniżej.
Oczywiście element HTML może również unosić się w prawą stronę, gdy dodamy do niego właściwość float wraz z wartością right.
Spójrzmy teraz, co się stanie z naszymi elementami, gdy oba sąsiednie elementy, w kodzie HTML, będą posiadały w sobie cechy elementu unoszącego się, czyli właściwość float wraz z wartością left.
Nasze dwa pierwsze elementy div są elementami unoszącymi się. Wspomniane elementy unoszące się ustawiły się obok siebie, ponieważ ich wspólne wartości szerokości nie przekraczają całkowitej szerokości ich rodzica.
Spójrzmy na kolejny przykład.
Tym razem unoszące się elementy div ustawiły się jeden pod drugim, względem siebie, ponieważ ich wspólna wartość szerokości jest za duża i nie pozwala na to, aby dane unoszące się elementy HTML ustawiły się obok siebie.
Spójrzmy na następny przykład.
Tym razem pierwszy element div, unosi się w lewą stronę, ponieważ została do niego dodana właściwość float wraz z wartością left, natomiast drugi element div unosi się w prawą stronę, ponieważ została do niego dodana właściwość float wraz z wartością right.
Obszar trzeciego elementu div został umieszczony dosłownie pod elementami unoszącymi się, które występują przed danym elementem div.
Jak sprawić, aby elementy HTML nie mogły unosić się nad wskazanym przez nas elementem HTML?
Do tego celu służy właściwość clear oraz wartość left, right lub both.
Gdy dodamy właściwość clear wraz z wartością left do elementu HTML, to nad danym elementem HTML nie będzie mógł znaleźć się element HTML, który unosi się w lewą stronę (element HTML, który unosi się w prawą stronę, będzie mógł znaleźć się nad danym elementem HTML).
Przykład:
Natomiast gdy dodamy właściwość clear wraz z wartością right do elementu HTML, to nad danym elementem HTML nie będzie mógł znaleźć się element HTML, który unosi się w prawą stronę (element HTML, który unosi się w lewą stronę, będzie mógł znaleźć się nad danym elementem HTML).
Przykład:
Gdy dodamy właściwość clear wraz z wartością both do elementu HTML, to nad danym elementem HTML nie będzie mógł znaleźć się żaden element HTML, który unosi się.
Przykład:
Jeżeli chcielibyśmy odsunąć element HTML, który posiada w sobie właściwość clear:both; od elementu HTML, który posiada w sobie właściwość float, za pomocą właściwości margin, to właściwość tą (np. margin-bottom:15px;) należy dodać do elementu unoszącego się, który występuje przed elementem, który zakazuje unoszenia się (element z właściwością clear:both;), ponieważ w innym wypadku właściwość margin nie będzie "działać".
Kod dokumentu HTML został umieszczony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
#pierwszy {
background-color:lightblue;
padding:15px;
margin-bottom:15px;
float:left;
}
#drugi {
background-color:lightgreen;
padding:45px 15px;
margin-bottom:15px;
float:right;
}
#trzeci {
background-color:tomato;
padding:45px 15px;
margin:15px;
clear:both;
}
</style>
</head>
<body>
<div id="pierwszy">unosi się w lewo</div>
<div id="drugi">unosi się w prawo</div>
<div id="trzeci">element unoszący się nie będzie mógł znaleźć się nad tym elementem HTML, ponieważ do tego elementu została dodana właściwość clear wraz z wartością both</div>
</body>
</html>
Gdy zapoznawaliśmy się z elementami blokowymi to dowiedzieliśmy się, że górne i dolne marginesy dwóch elementów blokowych, umieszczonych obok siebie, nie sumują się, jednak zależność ta, pomiędzy elementami blokowymi, znika w momencie gdy dane elementy HTML stają się elementami unoszącymi się. Dlatego gdy oba elementy unoszące się będą styczne do siebie, po którejś ze stron, to ich marginesy zewnętrzne zsumują się (jeżeli takie marginesy będą posiadały oba elementy unoszące się).
Przykładowo, poniżej zostały umieszczone dwa elementy unoszące się, których marginesy zewnętrzne wynoszą 50 pikseli, ponieważ została do nich dodana właściwość margin wraz z wartością 50px, jednak odległość pomiędzy tymi elementami unoszącymi się, wynosi 100 pikseli, a nie 50 pikseli, tak jak w przypadku zwykłych elementów blokowych, które nie posiadają w sobie cechy elementu unoszącego się.
Kod dokumentu HTML został umieszczony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
#pierwszy {
background-color:lightgreen;
padding:45px 15px;
margin:50px;
float:left;
}
#drugi {
background-color:tomato;
padding:45px 15px;
margin:50px;
float:left;
}
</style>
</head>
<body>
<div id="pierwszy">unosi się w lewo</div>
<div id="drugi">unosi się w lewo</div>
</body>
</html>
Ponadto, gdy dodamy do elementu unoszącego się wartości marginesów zewnętrznych (właściwość margin), to będą one liczone od krawędzi elementu rodzica (nie musi on posiadać marginesów wewnętrznych lub obramowania).
Przykład:
Właściwość float jest wykorzystywana do tworzenia różnych układów elementów HTML, które zawierają elementy blokowe wyświetlone obok siebie.
Ponadto właściwość float może nam sprawić pewne problemy. Ich poznawaniem i rozwiązywaniem zajmiemy się wkrótce.
Element z właściwością float może być różnie nazywany. Możesz również spotkać się z nazwą - pływający element HTML. W takim wypadku możemy powiedzieć, że element HTML pływa w lewą lub prawą stronę w obszarze swojego elementu rodzica.
W następnej części kursu CSS poznamy sposób na dodanie dodatkowej zawartości do danego elementu HTML, która będzie traktowana przez przeglądarkę internetową jako dodatkowy element HTML.