Pływające elementy

7.1 Właściwość float

Pływające elementy używające właściwości float i clear były jednymi z pierwszych metod do tworzenia złożonych układów w web designie. Mimo że nowoczesne metody takie jak Flexbox i Grid są często preferowane, znajomość używania float i clear jest wciąż ważna do pracy z przestarzałymi projektami lub zrozumienia podstaw CSS.

Właściwość float

Właściwość float pozwala elementowi "pływać" w lewo lub w prawo, być otaczanym przez tekst i inne elementy. Jest to szczególnie przydatne do tworzenia układów z kolumnami i otaczania obrazków tekstem.

Składnia:

    
      .element {
        float: left; /* lub right */
      }
    
  

Wartości właściwości float:

• left: element pływa w lewo, a kolejne elementy otaczają go z prawej strony
• right: element pływa w prawo, a kolejne elementy otaczają go z lewej strony
• none: wartość domyślna, element nie pływa
• inherit: dziedziczy wartość od elementu nadrzędnego

Przykład użycia float:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="content">
        <p>This is some content that will wrap around the floated elements. The left floated element will be placed to the left, and the right floated element will be placed to the right.</p>
      </div>
    
  

7.2 Właściwość clear

Właściwość clear jest używana do zarządzania zachowaniem otaczania przez pływające elementy. Pozwala na zapobieganie otaczaniu elementu przez pływające elementy z określonej strony.

Składnia:

    
      .element {
        clear: left; /* lub right */
      }
    
  

Wartości właściwości clear:

• left: element nie będzie otaczany z lewej strony
• right: element nie będzie otaczany z prawej strony
• both: element nie będzie otaczany ani z lewej, ani z prawej strony
• none: wartość domyślna, element otaczany z obu stron

Przykład użycia clear:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .clear {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="clear">Cleared Element</div>
      <div class="content">
        <p>This content will not wrap around the floated elements because of the cleared element above.</p>
      </div>
    
  

Przykład techniki "clearfix":

    
      .container::after {
        content: "";
        display: table;
        clear: both;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
      </div>
    
  

7.3 Zalety i wady użycia float

Zalety

1. Prostota użycia:
   • Łatwość tworzenia prostych układów za pomocą float
2. Szerokie wsparcie przeglądarek:
   • float jest wspierane przez wszystkie nowoczesne przeglądarki, włączając w to starsze wersje
3. Elastyczność w układach:
   • Możliwość tworzenia różnych układów, w tym otaczania obrazków tekstem i tworzenia wielowierszowych układów

Wady

1. Trudności w zarządzaniu złożonymi układami:
   • float może powodować problemy przy tworzeniu złożonych układów, szczególnie gdy wymagana jest pionowa wyrównanie
2. Problemy z wysokością elementów nadrzędnych:
   • Elementy nadrzędne mogą się "zapadać", jeśli wszystkie ich elementy podrzędne pływają. To wymaga użycia technik takich jak clearfix, aby to naprawić
3. Przestarzałość:
   • Nowoczesne metody takie jak Flexbox i Grid oferują bardziej potężne i elastyczne sposoby tworzenia układów

Przykład tworzenia układu za pomocą float i clear

Tworzenie układu dwukolumnowego za pomocą float i clear.

W tym przykładzie tworzony jest układ dwukolumnowy z bocznym panelem (.sidebar) i główną zawartością (.main). Elementy .sidebar i .main pływają w lewo, a element .footer z clear: both; zapobiega otaczaniu.

    
      .container {
        width: 100%;
      }

      .sidebar {
        float: left;
        width: 25%;
        background-color: lightblue;
        padding: 10px;
      }

      .main {
        float: left;
        width: 75%;
        background-color: lightgreen;
        padding: 10px;
      }

      .footer {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
        text-align: center;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
        <div class="footer">Footer Content</div>
      </div>
    
  

Użycie float i clear pozostaje ważnym narzędziem w arsenale web developerów, mimo pojawiania się bardziej nowoczesnych metod. Zrozumienie ich działania pomaga w konserwacji i aktualizacji starszych projektów, a także w tworzeniu prostych układów. Nowoczesne metody takie jak Flexbox i Grid są często preferowane dla tworzenia złożonych i responsywnych układów, ale znajomość float i clear wciąż jest aktualna.