Autor publikacji: Virtual Patriot - Administrator

float

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - float property (LV3)

Przeznaczenie 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

Informacje dodatkowe: brak

Informacje techniczne o właściwości `float`

przeznaczenie: element HTML każdego typu, lecz nie element HTML będący elementem dzieckiem elementu HTML typu flex, inline-flex, grid lub inline-grid
pozycja: static, relative
dziedziczenie: nie
wartość initial: none
wyjątki initial: brak
animowanie: tak (animacja schodkowa)

Interpretacja właściwości `float`

: tak
: tak
: tak
: tak
: tak
: tak

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

none

Wyjaśnienie

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

Domyślnie element HTML nie jest pływającym w obszarze zawartości swojego elementu rodzica 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, 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 w obszarze zawartości swojego elementu rodzica 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:#7DCDE8;
      }

      #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, 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

Wyjaśnienie

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 obszaru zawartości swojego elementu rodzica w kierunku lewej krawędzi liniowej swojego elementu rodzica.

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

Przykładowy element "div#dziecko" stał się pływającym w obszaru zawartości swojego elementu rodzica elementem HTML, przykładowy element "div#dziecko" pływa w kierunku lewej krawędzi liniowej swojego elementu rodzica, 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:#7DCDE8;
      }

      #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, 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>

right

Wyjaśnienie

Za pomocą wartości right 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 prawej krawędzi liniowej swojego elementu rodzica.

Przykład

  float:right;

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

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

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:#7DCDE8;
      }

      #dziecko {
        float:right;
        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, 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>