Залежно від дизайну, що розробляється, кожне з наведених нижче розчинів CSS має свої переваги.
У виправлення є корисні програми, але він також використовувався як хак. Перш ніж використовувати чітке виправлення, можливо, ці сучасні рішення css можуть бути корисними:
Сучасні рішення Clearfix
Контейнер с overflow: auto;
Найпростіший спосіб очищення плаваючих елементів - це використання стилю, overflow: autoщо містить елемент. Це рішення працює у всіх сучасних браузерах.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
З одного боку, використання певних комбінацій поля та накладки на зовнішньому елементі може призвести до появи смуг прокрутки, але це можна вирішити, розмістивши поле та прокладку на іншому батьківському елементі.
Використання "переповнення: приховано" також є рішенням для виправлення, але не буде мати смуг прокрутки, однак за допомогою hiddenобрізання будь-якого вмісту, розміщеного за межами елемента, що містить.
Примітка . Плаваючий елемент - це imgтег у цьому прикладі, але може бути будь-яким html-елементом.
Clearfix Reloaded
Тьєррі Кобленц в CSSMojo написав: Перезавантажений самий останній виправлення . Він зазначив, що, відмовившись від підтримки oldIE, рішення можна спростити до одного оператора css. Крім того, використання display: block(замість display: table) дозволяє полем руйнуватися належним чином, коли елементи з чітким виправленням є побратимами.
.container::after {
content: "";
display: block;
clear: both;
}
Це найсучасніша версія виправлення.
⋮
⋮
Старіші рішення Clearfix
Наведені нижче рішення не потрібні сучасним браузерам, але можуть бути корисними для націлювання на старі браузери.
Зауважте, що ці рішення покладаються на помилки браузера, і тому їх слід використовувати лише в тому випадку, якщо жодне з перерахованих вище рішень не працює для вас.
Вони перераховані приблизно в хронологічному порядку.
"Beat That ClearFix" - чітке виправлення для сучасних браузерів
Тьєррі Кобленц з CSS Mojo зазначив, що, орієнтуючись на сучасні веб-переглядачі, ми можемо відкинути значення zoomта ::beforeвластивості / значення та просто використовувати:
.container::after {
content: "";
display: table;
clear: both;
}
Це рішення не підтримує IE 6/7… спеціально!
Тьєррі також пропонує: " Слово обережності : якщо ви починаєте новий проект з нуля, продовжуйте його виконувати, але не обмінюйте цю техніку з тією, яку ви маєте зараз, тому що, хоча ви не підтримуєте oldIE, ваші існуючі правила перешкоджають руйнуються поля ".
Micro Clearfix
Найсвіжіше і всесвітньо прийняте рішення Clearfix, Micro Clearfix від Nicolas Gallagher .
Відома підтримка: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Властивість переповнення
Цей основний метод є кращим для звичайного випадку, коли розміщений вміст не відображатиметься за межами контейнера.
http://www.quirksmode.org/css/clearing.html
- пояснює, як вирішити поширені проблеми, пов’язані з цією методикою, а саме встановлення width: 100%на контейнер.
.container {
overflow: hidden;
display: inline-block;
display: block;
}
Замість використання displayвластивості для встановлення "hasLayout" для IE, інші властивості можна використовувати для запуску елемента "hasLayout" для елемента .
.container {
overflow: hidden;
zoom: 1;
display: block;
}
Ще одним способом очищення плавців за допомогою overflowвластивості є використання підкреслення . IE застосовуватиме значення з префіксом підкреслення, інші браузери не будуть. zoomВластивість викликає hasLayout в IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
Хоча це працює ... використовувати хаки не ідеально.
PIE: Легкий спосіб очищення
Цей старший метод "Easy Clearing" має перевагу в тому, що дозволяє позиціонованим елементам висіти за межі контейнера за рахунок більш складних CSS.
Це рішення досить давнє, але ви можете дізнатися все про те, що простий спосіб очищення позиції - це все: http://www.positioniseverything.net/easyclearing.html
Елемент, що використовує властивість "clear"
Швидке та брудне рішення (з деякими недоліками), коли ви швидко щось ляпаєте разом:
<br style="clear: both" /> <!-- So dirty! -->
Недоліки
- Це не реагує, і, таким чином, може не забезпечити бажаного ефекту, якщо стилі компонування змінюються на основі запитів медіа Рішення в чистому CSS є більш ідеальним.
- Він додає розмітку html, не обов'язково додаючи семантичне значення.
- Він вимагає вбудованого визначення та рішення для кожного екземпляра, а не посилання класу на єдине рішення “clearfix” у css та посилання класу на нього у html.
- Це ускладнює роботу з кодом для інших, оскільки їм, можливо, доведеться писати більше хаків для роботи над ним.
- Надалі, коли вам потрібно / хочете використовувати інше рішення для виправлення, вам не доведеться повертатися назад і видаляти кожен
<br style="clear: both" />тег, розміщений навколо розмітки.
