Element pływający

Najprostszym sposobem ułożenia elementów blokowych w linii obok siebie jest wykorzystanie właściwości float. Właściwość ta może mieć wartość:

left - ustawia się (lub bardziej poetycko płynie do...) przy lewej krawędzi rodzica lub prawej krawędzi poprzedniego elementu pływającego,
right - ustawia się przy prawej krawędzi rodzica lub lewej krawędzi poprzedniego elementu pływającego,
none - element nie jest pływający (domyślnie).

Zastosowanie właściwości float - ćwiczenie 3_2_10_1

Arkusz stylów:

.pojemnik
{
  height:130px; 
  width:800px;
  padding:0;
  margin:0;
  font-family:Arial,sans-serif;
  font-size:16px;
  color:white;
  background-color:green;
}
  .pojemnik .w_lewo, .pojemnik .w_prawo
  {
    display:block;
    height:120px; 
    width:180px;
    background-image:url('obrazek.jpg');
  }
  .w_lewo
  {
    float:left;
  }
  .w_prawo
  {
    float:right;
  }

Strona:

<!doctype html>
<html>
  <head>
    <title>Element pływający</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="pojemnik">
      <div class="w_lewo">
        div1 - float:left
      </div>
      <div class="w_lewo">
        div2 - float:left
      </div>
      <div class="w_prawo">
        div3 - float:right
      </div>
    </div>
  </body>
</html>

Oblewanie obrazka tekstem - ćwiczenie 3_2_10_2

Zastosujemy ten sam arkusz stylów, część body naszej strony:

<body>
  <div class="pojemnik" style="height:auto; text-align:justify;">
    <div class="w_lewo" style="margin-right:10px;">
    </div>
    <div class="w_prawo" style="margin-left:10px;">
    </div>
      Lorem ipsum...    
  </div>
</body>

Właściwość float:left i float:right umożliwiają otaczać obrazki tekstem.

Kontrolowanie oblewania elementu pływającego - ćwiczenie 3_2_10_3

Jeżeli chcemy, aby dany element pływający (nazwijmy go np. el_1) nie sąsiadował z innym elementem, (nazwijmy go np. el_2), to należy właściwości clear elementu el_2, nadać jedną z wartości:

left - lewy bok elementu nie przylega do poprzedzającego elementu pływającego,
right - prawy bok nie przylega,
both - żaden bok nie przylega,
none - brak ograniczeń (wartość domyślna).

Polecenie można zastosować tylko do elementów wyświetlanych w bloku (display:block;).

W celu wykonania ćwiczenia zmodyfikujemy poprzedni przykład, pokazując jeden obrazek i wyświetlając tekst w akapicie dla którego ustalimy wartość clear.

Pierwsza strona wykonana jest dla clear:none;, natomiast druga dla clear:left;

<body>
  <div class="pojemnik" style="height:auto; text-align:justify;">
    <div class="w_lewo" style="margin-right:10px;">
    </div>
    <p style="clear:none;">
      Lorem ipsum...
    </p>
  </div>
</body>

<body>
  <div class="pojemnik" style="height:auto; text-align:justify;">
    <div class="w_lewo" style="margin-right:10px;">
    </div>
    <p style="clear:left;">
      Lorem ipsum...
    </p>
  </div>
</body>

W drugim przypadku, akapit tekstu znalazł się pod obrazkiem, ponieważ nie może on przylegać swoją lewą krawędzią do brazka.