CSS - float

Właściwość float wskazuje służy do pozycjonowani oraz formatowani treści wskazuje w jaki sposób element ma pływać (float)

left - znajduj się po lewej stronie right - znajduj się po prawej stronie none - nie pływaj inherit

Przykładowe zastosowanie

img {
  float: right;
}

Układ strony przy wykorzystaniu właściwości float

Clear

Właściwość clear definiuje po której stronie elementu pływające (float) elementy nie powinny się znajdować

Możliwe wartości clear: none, left, right, both, initial, inherit

clear - żaden z elementów pływający nie może znajdować się po lewej lub prawej stronie none - elementy pływające po obu stronach right/left - żaden z elementów pływający nie może znajdować się po lewej/prawej stronie

Przykładowe zastosowanie

img {
  float: left;
}

p.clear {
  clear: both;
}

Clearfix/Floatfix

Metody na pozbycie się funkcji float u dzieci pływającego rodzica

Przykładowe zastosowanie

  .clearfix::after {
    <!-- dodaje niewidzialny element/treść -->
    content: "";
    <!-- elementy pływające po żadnej ze stron -->
    clear: both;
    <!-- element zachowuje się jako tabela -->
    display: table;
  }

Overflow

Właściwość overflow: auto wpasowuje element znajdujący się w pływającym elemencie (float) tak aby nie wystawał po za niego - metoda starsza i wychodząca obecnie z użycia

Przykładowe zastosowanie

.clearfix {
  overflow: auto;
}

Źródło i polecane linki:

Clear

https://www.tutorialbrain.com/css_tutorial/css_clear/

Clearfix

https://www.youtube.com/watch?v=2tC4PIlEz_o

https://www.w3schools.com/howto/howto_css_clearfix.asp

float

https://www.w3schools.com/css/css_float.asp