Ostatnio edytowany:

float

Autor: Virtual Patriot

Opis właściwości float

Za pomocą właściwości float możemy sprawić, że interesujący nas element HTML stanie się pływającym w obszarze zawartości swojego elementu rodzica elementem HTML.

Dodatkowe cechy pływającego elementu HTML

  • każdy pływający element HTML zazwyczaj zachowuje cechy podobne do cech elementu HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może reagować dany element HTML
  • treść do wyświetlenia występująca w kodzie HTML po pływającym elemencie HTML może opływać ten pływający element HTML, ale tylko w sytuacji gdy wystarczy miejsca w danym obszarze zawartości
  • pływający element HTML występuje w obszarze zawartości swojego elementu rodzica, lecz pływający element HTML nie może bezpośrednio powiększać swoim rozmiarem rozmiaru swojego elementu rodzica

Element HTML traci zdolność pływania, gdy element HTML posiada pozycję absolute lub pozycję fixed.

Dodatkowe techniczne informacje o właściwości float

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości float

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości float

none

Opis

Wartość none jest domyślną wartością właściwości float.

Domyślnie element HTML nie jest pływającym elementem HTML.

Przykład

  float:none;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
div#dziecko
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Przykładowy element "div#dziecko" nie jest pływającym elementem HTML.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #rodzic {
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #dziecko {
        height:100px;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      <div id="dziecko">div#dziecko</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

left

Opis

Za pomocą wartości left właściwości float możemy sprawić, że interesujący nas element HTML stanie się pływającym w obszarze zawartości swojego elementu rodzica elementem HTML. Element HTML będzie pływał w kierunku tej krawędzi obszaru zawartości swojego elementu rodzica, która znajduje się po lewej stronie względem kierunku pisania tekstu, jaki posiada wspomniany element rodzic.

Przykład

  float:left;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
div#dziecko
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Przykładowy element "div#dziecko" jest pływającym w kierunku lewej krawędzi obszaru zawartości swojego elementu rodzica elementem HTML, ponieważ do wspomnianego elementu "div#dziecko" została dodana właściwość "float" wraz z wartością "left".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #rodzic {
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #dziecko {
        float:left;
        height:100px;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      <div id="dziecko">div#dziecko</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>