Плаваючі елементи

7.1 Властивість float

Плаваючі елементи з використанням властивостей float і clear були одним з перших методів для створення складних макетів у веб-дизайні. Незважаючи на те, що сучасні методи, такі як Flexbox і Grid, часто переважніші, знання використання float і clear все ще важливе для роботи зі застарілими проєктами або розуміння основ CSS.

Властивість float

Властивість float дозволяє елементу "плавати" вліво або вправо, обтікатися текстом та іншими елементами. Це властивість особливо корисне для створення макетів з колонками та обтікання зображення текстом.

Синтаксис:

    
      .element {
        float: left; /* або right */
      }
    
  

Значення властивості float:

• left: елемент плаває вліво, і наступні елементи обтікають його справа
• right: елемент плаває вправо, і наступні елементи обтікають його зліва
• none: значення за замовчуванням, елемент не плаває
• inherit: успадковує значення від батьківського елемента

Приклад використання 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 Властивість clear

Властивість clear використовується для керування поведінкою обтікання плаваючих елементів. Вона дозволяє запобігти обтіканню елемента плаваючими елементами з певного боку.

Синтаксис:

    
      .element {
        clear: left; /* або right */
      }
    
  

Значення властивості clear:

• left: елемент не обтікається зліва
• right: елемент не обтікається справа
• both: елемент не обтікається ні зліва, ні справа
• none: значення за замовчуванням, елемент обтікається з обох сторін

Приклад використання 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>
    
  

Приклад техніки "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 Плюси та мінуси використання float

Плюси

1. Простота використання:
   • Легкість створення простих макетів за допомогою float
2. Широка підтримка браузерами:
   • float підтримується всіма сучасними браузерами, включаючи старі версії
3. Гнучкість у макетах:
   • Можливість створення різноманітних макетів, включаючи обтікання зображень текстом та створення багатострокових макетів

Мінуси

1. Складність у керуванні складними макетами:
   • float може створювати проблеми під час створення складних макетів, особливо коли потрібно вирівнювання по вертикалі
2. Проблеми з висотою батьківських елементів:
   • Батьківські елементи можуть "складатися", якщо всі їхні дочірні елементи плавають. Для цього потрібно використовувати такі техніки, як clearfix, для виправлення
3. Застарілість:
   • Сучасні методи, такі як Flexbox і Grid, надають більш потужні та гнучкі способи створення макетів

Приклад створення макета за допомогою float і clear

Створення двоколонкового макета за допомогою float і clear.

У цьому прикладі створюється двоколонковий макет із боковою панеллю (.sidebar) і основним вмістом (.main). Елементи .sidebar і .main плавають вліво, а елемент .footer з clear: both; запобігає обтіканню.

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

Використання float і clear залишається важливим інструментом у арсеналі веб-розробників, попри появу більш сучасних методів. Розуміння їх роботи допомагає у підтримці та оновленні старих проєктів, а також у створенні простих макетів. Сучасні методи, такі як Flexbox і Grid, часто переважніші для створення складних і адаптивних макетів, але знання float і clear все ще актуальне.