Що таке чіткий виправлення?

Нещодавно я переглянув код якогось веб-сайту і побачив, що кожен <div> має свій клас clearfix.

Після швидкого пошуку в Google я дізнався, що це іноді для IE6, але що насправді є чітким виправленням?

Чи можете ви надати кілька прикладів макета з чітким виправленням порівняно з макетом без чіткого виправлення?

Якщо вам не потрібно підтримувати IE9 або новішу версію, ви можете вільно користуватися flexbox і не потрібно використовувати плаваючі макети.

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

• display: inline-block - Краще
• Flexbox - найкращий (але обмежена підтримка браузера)

Flexbox підтримується від Firefox 18, Chrome 21, Opera 12.10 та Internet Explorer 10, Safari 6.1 (включаючи мобільний Safari) та браузера Android за замовчуванням 4.4.

Детальний список браузера див: https://caniuse.com/flexbox .

(Можливо, коли його позиція буде повністю встановлена, це може бути абсолютно рекомендований спосіб укладання елементів.)

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

Виправлення - це спосіб боротьби з проблемою контейнера нульової висоти для плаваючих елементів

Чітке виправлення виконується наступним чином:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Або якщо вам не потрібна підтримка IE <8, то також добре:

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

Зазвичай вам потрібно буде зробити щось наступне:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

З чітким виправленням потрібно лише таке:

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

Про це читайте в цій статті - від Chris Coyer @ CSS-Tricks

Інші відповіді правильні. Але хочу додати, що це пережиток того часу, коли люди вперше вивчали CSS та зловживали floatробити всі свої схеми.floatПотрібно робити такі речі, як плаваючі зображення поруч із довгими текстами тексту, але багато людей використовували це як основний механізм компонування. Оскільки це насправді не призначене для цього, вам потрібні хаки на зразок "clearfix", щоб він працював.

Ці дні display: inline-blockє надійною альтернативою ( за винятком IE6 та IE7 ), хоча більш сучасні браузери запускають ще більш корисні механізми компонування під назвами, такими як flexbox, макет сітки тощо.

clearfixДозволяє контейнер , щоб обернути його плавали дітей. Без аclearfix рівноцінного стилю контейнер не обертається навколо своїх плаваючих дітей і згортається так, як якщо б його плаваючі діти розміщувалися абсолютно.

Існує кілька версій чіткого виправлення з Ніколасом Галлахер та Тьєррі Кобленцом : ключові автори - .

Якщо ви хочете отримати підтримку для старих веб-переглядачів, краще скористатися цим виправленням:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

У SCSS ви можете використовувати таку техніку:

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

Якщо ви не хочете підтримувати старіші веб-переглядачі, є скорочена версія:

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

Запропонувати оновлення ситуації на ІІ квартал 2017 року.

Нова властивість відображення CSS3 доступна в Firefox 53, Chrome 58 та Opera 45.

.clearfix {
   display: flow-root;
}

Перевірте наявність будь-якого веб-переглядача тут: http://caniuse.com/#feat=flow-root

Елемент (із властивістю відображення, встановленим для потоку root), генерує блок блоку контейнерів і викладає його вміст за допомогою макета потоку. Він завжди встановлює новий контекст форматування блоку для його вмісту.

Це означає, що якщо ви використовуєте батьківський div, який містить одного або декількох плаваючих дітей, ця властивість гарантуватиме, що батько охоплює всіх своїх дітей. Без будь-якої необхідності в злому виправлення. Про будь-які діти, навіть навіть про останній елемент-манекен (якщо ви використовували варіант clearfix з: до останніх дітей).

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}

<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

Простіше кажучи, clearfix - це злом .

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

Я особисто схиляюся до рішення Micro Clearfix (Nicolas Gallagher)

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

довідник

Методика, яка зазвичай використовується у плаваючих макетів CSS, - це присвоєння кількох властивостей CSS елементу, який, як відомо, міститиме плаваючі елементи. Метод, який зазвичай реалізується за допомогою визначення класу, який називається clearfix, (як правило) реалізує такі поведінки CSS:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

Метою цих комбінованих способів поведінки є створення контейнера :afterактивного елемента, що містить єдине "." позначено як приховане, що очистить усі існуючі потоки та ефективно скине сторінку для наступного вмісту.

Інший (і, можливо, найпростіший) варіант для отримання чіткого виправлення полягає у використанні overflow:hidden;елемента, що містить. Наприклад

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}

<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

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

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

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

Менше вище буде компільовано в CSS нижче:

clearfix:after,
clearfix:before {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Ось інший метод те саме, але трохи інший

різниця - це змістова крапка, яка замінюється на \00A0==whitespace

Детальніше про це http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

Ось його компактна версія ...

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}