Що робить таке правило CSS:

.clear { clear: both; }

І навіщо нам це використовувати?

Я не буду пояснювати, як поплавці працюють тут (докладно), оскільки це питання, як правило, фокусується на тому, Чому використовувати clear: both;АБО, що clear: both;саме робить ...

Я буду тримати цю відповідь простою і до речі, і графічно поясню вам, чому clear: both;це потрібно чи що він робить ...

Зазвичай дизайнери плавають елементами вліво або вправо, що створює порожній простір з іншого боку, що дозволяє іншим елементам займати простір, що залишився.

Чому вони плавають елементами?

Елементи плавають тоді, коли дизайнеру потрібні два елементи рівня блоку поруч. Наприклад, ми хочемо створити базовий веб-сайт, який має макет, як показано нижче ...

Живий приклад демонстраційного зображення.

Код для демонстрації

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

Примітка: Ви , можливо , доведеться додати header, footer, aside, section(і інші елементи HTML5) , як display: block;в таблиці стилів для явного згадування про те , що елементи є елементами рівня блоку.

Пояснення:

У мене є основний макет, 1 заголовок, 1 бічна смужка, 1 область вмісту та 1 колонтитул.

Не плаває header, далі йде asideтег, який я буду використовувати для бічної панелі свого веб-сайту, тому я буду плавати елементом вліво.

Примітка: Елемент рівня блоку за замовчуванням займає документ на 100% ширини, але коли плаває ліворуч або праворуч, він буде змінювати розмір відповідно до вмісту, який він містить.

1. Нормальна поведінка елемента рівня блоку
2. Плаваюча поведінка елемента рівня блоку

Отже, як ви зазначаєте, лівий плаваючий divзалишає простір праворуч невикористаним, що дозволить divперейти після нього в інший простір.

1. divбуде виведено один за одним, якщо вони НЕ плавають
2. div зміститься один біля одного, якщо пливе ліворуч або праворуч

Гаразд, ось так поводяться елементи рівня блоків, коли пливуть ліворуч або праворуч, так що тепер, чому це clear: both;потрібно і чому?

Тож якщо ви відзначите в демонстраційній версії макета - якщо ви забули, ось воно ..

Я використовую клас, який називається, .clearі він містить властивість, яку називають clearзі значенням both. Тож давайте подивимось, для чого це потрібно both.

Я проплив asideі sectionелементи ліворуч, тож припустимо сценарій, коли у нас є басейн, де headerтверда земля, asideі sectionпливуть у басейні, а колонтитул знову тверда земля, щось подібне ..

Отже, блакитна вода не має поняття, яка площа плаваючих елементів, вони можуть бути більшими, ніж пул або меншими, тому тут виникає поширене питання, яке турбує 90% початківців CSS: чому фон елемента контейнера не розтягується коли він містить плаваючі елементи. Це тому, що контейнерний елемент є POOL тут, і POOL не має уявлення, скільки об’єктів плаває, або яка довжина або ширина плаваючих елементів, тому він просто не розтягнеться.

1. Нормальний потік документа
2. Розділи плавали вліво
3. Очищені плаваючі елементи, щоб розтягнути фоновий колір контейнера

(Для ^{чіткого способу} зверніться до розділу ^[Clearfix] цієї відповіді. Я divнавмисно використовую порожній приклад для пояснення)

Я подав 3 приклади вище, 1-й - це звичайний документообіг, де redфон буде відображатися так, як очікувалося, оскільки контейнер не містить плаваючих об'єктів.

У другому прикладі, коли об’єкт пливе ліворуч, елемент контейнера (POOL) не буде знати розмірів плаваючих елементів і, отже, не розтягнеться до висоти плаваючих елементів.

Після використання clear: both;елемент контейнера буде розтягнуто до розмірів плаваючого елемента.

Ще одна причина, clear: both;яка використовується - це запобігання переміщенню елемента на інший простір.

Скажіть, що ви хочете, щоб 2 елементи були поруч і ще один елемент під ними ... Отже, ви будете плавати 2 елементи вліво, а ви хочете, щоб інший був під ними.

1. divПоплавок ліворуч призводить до sectionпереміщення у залишок місця
2. Плаваючий divочищений, щоб sectionтег відображався нижче плаваючого divs

1-й приклад

2-й приклад

І останнє, але не менш важливе, footerтег буде надано після плаваючих елементів, оскільки я використовував clearклас до оголошення моїх footerтегів, що гарантує, що всі плаваючі елементи (зліва / справа) будуть очищені до цього моменту.

Clearfix

Перехід до чіткого виправлення, яке пов'язане з плаваючими елементами. Як уже вказав @Elky , спосіб очищення цих плавців - це не простий спосіб зробити це, оскільки ми використовуємо порожній divелемент, який не є divелементом. Звідси випливає чітке виправлення.

Подумайте про це як про віртуальний елемент, який створить для вас порожній елемент до того, як закінчиться ваш батьківський елемент. Це самоочистить ваш елемент обгортки, утримуючи плаваючі елементи. Цей елемент не буде існувати у вашому домені буквально, але зробить цю роботу.

Для самоочищення будь-якого елемента обгортки, що має плаваючі елементи, ми можемо використовувати

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

Зверніть увагу на :afterпсевдоелемент, який я використовував для цього class. Це створить віртуальний елемент для обгорткового елемента перед тим, як він закриється. Якщо ми подивимось на будинок, то можна побачити, як це відображається у дереві документа.

Отже, якщо ви бачите, це відображається після плаваючої дитини, divде ми очищаємо поплавці, що є не що інше, як мати порожній divелемент із clear: both;властивістю, яке ми також використовуємо для цього. Тепер чому display: table;і contentне в цій області відповідей, але ви можете дізнатися більше про псевдоелемент тут .

Зауважте, що це також буде працювати в IE8, оскільки IE8 підтримує :afterпсевдо .

Оригінальний відповідь:

Більшість розробників плаває свій вміст ліворуч або праворуч на своїх сторінках, ймовірно, диви з логотипом, бічною панеллю, вмістом тощо. Ці диви плаваються ліворуч або праворуч, залишаючи решту місця невикористаним, отже, якщо ви розмістите інші контейнери, він буде пливіть також у залишковому просторі, тому для запобігання clear: both;використанню, він очищає всі елементи, що плавали вліво або вправо.

Демонстрація:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

Тепер що робити, якщо ви хочете зробити інший візуалізатор, представлений нижче div1, так що ви будете використовувати clear: both;його, це забезпечить очищення всіх поплавків, ліворуч або праворуч

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------

clearВластивість вказує , що зліва, справа або з обох сторін елемента не може бути поруч з раніше розміщених елементів в контексті форматування ж блоку. Очищені елементи висуваються нижче відповідних плаваючих елементів. Приклади:

clear: none; Елемент залишається поруч із плаваючими елементами

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

clear: left; Елемент, просунутий нижче лівих плаваючих елементів

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

clear: right; Елемент, просунутий нижче правого плаваючого елемента

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

clear: both; Елемент просунувся нижче всіх плаваючих елементів

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

clear не впливає на плаває поза поточним контекстом форматування блоку

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

CSS плаває і чітко

Зразок скрипки

Просто спробуйте вилучити clear:bothвластивість з divс class sampleі перегляньте, як воно слід плавати divs.

Відповідь містера Алієна ідеальна, але все одно я не рекомендую користуватися, <div class="clear"></div>оскільки це просто злом, який робить вашу розмітку брудною. Це марно порожнє divз точки зору поганої структури та семантики, це також робить ваш код не гнучким. У деяких браузерах цей дів спричиняє додаткову висоту, і ви повинні додати, height: 0;що ще гірше. Але справжні неприємності починаються, коли ви хочете додати тло або рамку навколо плаваючих елементів - воно просто зруйнується, оскільки веб-дизайн був погано розроблений . Я рекомендую загортати плаваючі елементи в контейнер, у якому є чітко виправлене CSS правило. Це також хак, але красивий, гнучкіший у використанні та читабельний для людей та SEO роботів.

Коли ви хочете, щоб один елемент був розміщений внизу іншого елемента, ви використовуєте цей код у CSS. Він використовується для поплавців.

Якщо ви плаваєте вмістом, ви можете плавати ліворуч або праворуч ... тож у загальному макеті у вас можуть бути лівий навичок, розділ вмісту та колонтитул.

Щоб колонтитул залишався нижче обох цих поплавків (якщо ви плавали ліворуч та праворуч), ви ставите колонтитул як clear: both.

Таким чином він залишиться нижче обох поплавків.

(Якщо ви лише розчищаєте ліворуч, тоді вам потрібно дійсно clear: left;.)

Пройдіть цей підручник: