Unoszący się element HTML

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.

pierwszy element - div
drugi element - div
trzeci element - div

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.

pierwszy element - div
drugi element - div
trzeci element - div

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.

unosi się w lewo
to jest przykładowa zawartość, która została dodana do drugiego elementu - div - który występuje po unoszącym się elemencie HTML, w kodzie, zawartość, którą widzisz, jest umieszczana obok prawej oraz dolnej krawędzi elementu, który się unosi nad danym elementem HTML
trzeci element - div

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.

unosi się w prawo
to jest przykładowa zawartość, która została dodana do drugiego elementu - div - który występuje po unoszącym się elemencie HTML, w kodzie, zawartość, którą widzisz, jest umieszczana obok lewej oraz dolnej krawędzi elementu, który się unosi nad danym elementem HTML
trzeci element - div

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.

unosi się w lewo
unosi się w lewo
trzeci element - div

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.

unosi się w lewo
unosi się w lewo
trzeci element - div

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.

unosi się w lewo
unosi się w prawo
trzeci element - div

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:

unosi się w lewo
unosi się w prawo
tylko element unoszący się w prawą stronę 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ą left

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:

ten element HTML unosi się w lewą stronę, została do niego dodana dodatkowa treść oraz została ustalona szerokość za pomocą właściwości width, abyśmy mogli zobaczyć, że ten element HTML może znaleźć się nad trzecim elementem div
unosi się w prawo
tylko element unoszący się w lewą stronę 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ą right

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:

unosi się w lewo
unosi się w prawo
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

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ę.

marginesy elementów HTML - właściwość float

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:

div - element rodzic
unosi się w lewo
unosi się w lewo

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.