Autor publikacji
Virtual Patriot - Administrator

float

Data publikacji
Ostatnio edytowano

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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

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
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" 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>