Ответ 1

В зависимости от создаваемого проекта каждый из нижеприведенных решений clearfix CSS имеет свои преимущества.

У clearfix есть полезные приложения, но он также использовался как хак. Прежде чем использовать clearfix, возможно, эти современные css-решения могут быть полезны:

• css flexbox
• сетка css

Современные решения Clearfix

Контейнер с overflow: auto;

Самый простой способ очистить плавающие элементы - это использование 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>

Один недостаток, использующий определенные комбинации полей и отступов на внешнем элементе, может вызывать появление полос прокрутки, но это можно решить, поместив маркер и дополнение на другой элемент, содержащий родительский элемент.

Использование "переполнения: скрытое" также является решением clearfix, но не имеет полос прокрутки, однако использование hidden содержимого обрезает любой контент, расположенный за пределами содержащего элемента.

Примечание. В этом примере плавающий элемент является тегом img, но может быть любым элементом html.

Clearfix Reloaded

Тьерри Кобленц на CSSMojo написал: Самое последнее обновление clearfix. Он отметил, что, отказавшись от поддержки oldIE, решение может быть упрощено до одной инструкции css. Кроме того, использование display: block (вместо display: table) позволяет полям рушиться должным образом, когда элементы с clearfix являются братьями и сестрами.

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

Это самая современная версия clearfix.

⋮

⋮

Старые решения Clearfix

Нижеприведенные решения не нужны для современных браузеров, но могут быть полезны для ориентации на старые браузеры.

Обратите внимание, что эти решения зависят от ошибок браузера и поэтому должны использоваться, только если ни одно из вышеперечисленных решений не работает для вас.

Они перечислены примерно в хронологическом порядке.

"Beat That ClearFix", 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 свойств zoom hasLayout в IE:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

Хотя это работает... не рекомендуется использовать хаки.

PIE: простой способ очистки

Этот более старый метод "Easy Clearing" имеет то преимущество, что позволяет позиционировать элементы за пределами границ контейнера за счет более сложного CSS.

Это решение довольно старое, но вы можете узнать все о Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html

Элемент, использующий свойство "clear"

Быстрое и грязное решение (с некоторыми недостатками), когда вы быстро шлепаете что-то вместе:

<br style="clear: both" /> <!-- So dirty! -->

Недостатки

• Он не реагирует и, таким образом, не может обеспечить желаемый эффект, если стили макета меняются в зависимости от медиа-запросов. Решение в чистом CSS является более идеальным.
• Он добавляет разметку HTML без необходимости добавления семантического значения.
• Для этого требуется встроенное определение и решение для каждого экземпляра, а не ссылка класса на одно решение "clearfix" в css и класс, ссылающиеся на него в html.
• Это делает код трудным для работы с другими, поскольку им, возможно, придется писать больше хаков, чтобы обойти его.
• В будущем, когда вам нужно/нужно использовать другое решение clearfix, вам не нужно будет возвращаться и удалять каждый <br style="clear: both"/> тега"], замусоренного вокруг разметки.

Ответ 2

Какие проблемы мы пытаемся решить?

Есть два важных соображения, когда плавающие вещи:

1. Содержит потомок плавает. Это означает, что рассматриваемый элемент становится достаточно высоким, чтобы обернуть всех плавающих потомков. (Они не висят снаружи.)

2. Изоляция потомков от внешних поплавков. Это означает, что потомки внутри элемента должны иметь возможность использовать clear: both и не взаимодействовать с плавающими элементами вне элемента.

Блокировать контексты форматирования

Есть только один способ сделать оба этих. И это установить новый контекст форматирования блока. Элементы, которые устанавливают контекст форматирования блока, представляют собой изолированный прямоугольник, в котором поплавки взаимодействуют друг с другом. Контекст форматирования блока всегда будет достаточно высоким для визуального переноса его плавающих потомков, и никакие плавающие объекты вне контекста форматирования блока не могут взаимодействовать с элементами внутри. Эта двусторонняя изоляция - именно то, что вы хотите. В IE эта же концепция называется hasLayout, которую можно установить с помощью zoom: 1.

Есть несколько способов установить контекст форматирования блока, но я рекомендую решение: display: inline-block with width: 100%. (Конечно, существуют обычные предостережения с использованием width: 100%, поэтому используйте box-sizing: border-box или поместите padding, margin и border на другой элемент.)

Самое надежное решение

Вероятно, наиболее распространенным применением поплавков является двухколонный макет. (Может быть расширен до трех столбцов.)

Сначала разметка структуры.

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

А теперь CSS.

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

Попробуй сам

Перейдите к JS Bin, чтобы поиграть с кодом и посмотреть, как это решение строится с нуля.

Традиционные методы исправления ошибок считаются вредными

Проблема с традиционными решениями clearfix заключается в том, что они используют две разные концепции рендеринга для достижения одной и той же цели для IE и всех остальных. В IE они используют hasLayout для установки нового контекста форматирования блока, но для всех остальных они используют сгенерированные блоки (:after) с clear: both, что не устанавливает новый контекст форматирования блока. Это означает, что вещи не будут вести себя одинаково во всех ситуациях. Для объяснения, почему это плохо, см. Все, что вы знаете о Clearfix, неправильно.

Ответ 3

Новый стандарт, используемый Inuit.css и Bourbon - двумя очень широко используемыми и хорошо поддерживаемыми структурами CSS/Sass:

.btcf:after {
    content:"";
    display:block;
    clear:both;
}

Заметки

Имейте в виду, что clearfixes - это, по сути, хак для того, какие гибкие макеты теперь могут обеспечить гораздо более разумным способом. Поплавки CSS изначально были предназначены для того, чтобы встроенный контент обтекал - как изображения в длинной текстовой статье - а не для макетов сетки и тому подобного. Если ваши целевые браузеры поддерживают flexbox, стоит посмотреть.

Это не поддерживает IE7. Вы не должны поддерживать IE7. Это продолжает показывать пользователям незафиксированные уязвимости безопасности и делает жизнь сложнее для всех других веб-разработчиков, поскольку это снижает нагрузку на пользователей и организации, чтобы переключиться на современные браузеры.

Это clearfix было объявлено и объяснено Тьерри Кобленцем в июле 2012 года. Он избавляет от лишнего веса от микро-clearfix от Nicolas Gallagher 2011. В этом процессе он освобождает псевдоэлемент для вашего собственного использования. Это было обновлено, чтобы использовать display: block а не display: table (опять же, кредит Thierry Koblentz).

Ответ 4

Я рекомендую использовать следующее, взятое из http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

Ответ 5

Свойство переполнения можно использовать для очистки поплавков без дополнительной наценки:

.container { overflow: hidden; }

Это работает для всех браузеров, кроме IE6, где все, что вам нужно сделать, это включить hasLayout (масштабирование является моим предпочтительным методом):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

Ответ 6

Я нашел ошибку в официальном методе CLEARFIX: DOT не имеет размера шрифта. И если вы установите height = 0, а первый элемент в DOM-Tree имеет класс clearfix, у вас всегда будет край в нижней части страницы 12px:)

Вы должны исправить это следующим образом:

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

Теперь это часть YAML-Layout... Просто взгляните на нее - это очень интересно! http://www.yaml.de/en/home.html

Ответ 7

Это довольно аккуратное решение:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Известно, что он работает в Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6 +

Включение: перед селектором не требуется очищать поплавки, но он предотвращает крах сверху вниз в современных браузерах. Эта обеспечивает визуальную согласованность с IE 6/7 при масштабировании: 1 приложенное.

От http://nicolasgallagher.com/micro-clearfix-hack/

Ответ 8

Clearfix из начальной загрузки:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

Ответ 9

Я просто использую: -

.clear:after{
  clear: both;
  content: "";
  display: block;
}

Лучше всего работает и совместим с IE8 +:)

Ответ 10

Учитывая огромное количество ответов, я не собирался публиковать. Однако этот метод может помочь кому-то, так как он мне помог.

Оставайтесь по возможности с поплавками

Стоит упомянуть, что я избегаю плавать, как Эбола. Там много причин, и я не одинок; Прочтите Rikudo ответ на что это clearfix, и вы поймете, что я имею в виду. По его собственным словам: ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

Есть другие хорошие (а иногда и лучшие) варианты, кроме плавающих. По мере того, как технология продвигается и улучшается, flexbox (и другие методы) будут широко использоваться, а плавающие будут просто плохими. Может быть, CSS4?

Повреждение в поплавке и сбой очистки

Во-первых, иногда вы можете подумать, что вы защищены от поплавков, пока ваш спасатель не будет проколот, и ваш поток html начнет погружаться:

В кодеделе http://codepen.io/omarjuvera/pen/jEXBya ниже, практика очистки float с помощью <div classs="clear"></div> (или другого элемента) является общей, но нахмурилась и анти-семантический.

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

Однако, когда вы думали, что ваш поплавок плывет достойно... бум! Поскольку размер экрана становится все меньше и меньше, вы видите странное поведение, как показано ниже (Same http://codepen.io/omarjuvera/pen/jEXBya):

Зачем вам это нужно? Я не уверен в точной цифре, но около 80% (или более) используемых устройств - это мобильные устройства с небольшими экранами. Настольные компьютеры/ноутбуки больше не являются королями.

Это не заканчивается там

Это не единственная проблема с поплавками. Их много, но в этом примере некоторые могут сказать all you have to do is to place your floats in a container. Но, как вы можете видеть в codepen и графике, это не так. Это, по-видимому, сделало все хуже:

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

Что касается результата?

Это то же самое!

По крайней мере, вы знаете, вы начнете вечеринку с CSS, пригласив на вечеринку все виды селекторов и свойств; делая больше беспорядка вашего CSS, чем то, с чего вы начали. Просто исправить ваш поплавок.

Утилита CSS Clearfix для спасения

Эта простая и очень адаптируемая часть CSS - это красота и "спаситель":

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Что это! Это действительно работает без нарушения семантики и я упоминал он работает?:

Из того же образца... HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Теперь нам больше не нужно <div classs="clear"></div> <!-- Acts as a wall --> и держать семантическую полицию счастливой. Это не единственное преимущество. Это clearfix реагирует на любой размер экрана без использования @media в нем простейшей формы. Другими словами, он будет держать ваш флоат-контейнер под контролем и предотвращать наводнения. Наконец, он обеспечивает поддержку старых браузеров всего в одном небольшом каратэ chop =)

Здесь clearfix снова

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Ответ 11

Я всегда плаваю основные разделы моей сетки и применяю clear: both; к нижнему колонтитулу. Это не требует дополнительного div или класса.

Ответ 12

честно; все решения кажутся взломом, чтобы исправить ошибку рендеринга... я ошибаюсь?

Я нашел <br clear="all" /> самым простым и простым. видя class="clearfix" повсюду, невозможно погладить чувства кого-то, кто возражает против посторонних элементов маркеры, не так ли? вы просто рисуете проблему на другом холсте.

Я также использую решение display: hidden, которое отлично и не требует дополнительных деклараций классов или разметки html... но иногда вам нужны элементы для переполнения контейнера, например. красивые ленты и пояса

Ответ 13

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

Ответ 14

Использование overflow:hidden/auto и высоты для ie6 будет достаточным, если плавающий контейнер имеет родительский элемент.

Либо один из #test может работать, так как HTML, указанный ниже, для очистки плавающих элементов.

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

В случаях, когда это отказывается работать с ie6, просто плавайте родительский элемент, чтобы очистить float.

#test {
  float: left; // using float to clear float
  width: 99%;
}

Никогда еще не нужен какой-либо другой вид клиринга. Возможно, так, как я пишу свой HTML.

Ответ 15

Я пробовал все эти решения, большой размер добавляется к элементу <html> автоматически, когда я использую следующий код:

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

Наконец, я решил проблему поля, добавив font-size: 0; к указанному выше CSS.

Ответ 16

С LESS (http://lesscss.org/) можно создать удобный помощник clearfix:

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

И затем используйте его с проблемными контейнерами, например:

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}

Ответ 17

С помощью SASS clearfix:

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

и он используется как:

.container {
    @include clearfix;
}

если вы хотите новое clearfix:

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

Ответ 18

Я бы плавал #content тоже, таким образом, оба столбца содержат поплавки. Кроме того, поскольку это позволит вам очищать элементы внутри #content, не очищая боковую панель.

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

В этой статье упоминаются несколько триггеров, которые вы можете использовать: контексты форматирования блоков.

Ответ 19

Clearfix - это способ автоматического удаления элемента после себя, так что вам не нужно добавлять дополнительную разметку.

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

Обычно вам нужно сделать что-то следующим образом:

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

С помощью clearfix вам нужно только

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

Ответ 20

Новое значение отображения похоже на задание в одной строке.

display: flow-root;

Из спецификации w3: "Элемент генерирует поле контейнера блоков и выводит его содержимое с использованием макета потока. Он всегда устанавливает новый контекст форматирования блока для его содержимого".

Информация: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

※ Как показано в приведенной выше ссылке, поддержка в настоящее время ограничена, поэтому вспомогательная поддержка, как показано ниже, может быть полезна: https://github.com/fliptheweb/postcss-flow-root

Ответ 21

Зачем просто пытаться использовать css hack, чтобы сделать то, что делает одна строка HTML. И почему бы не использовать семантический html tu put break для возврата в строку?

Fo меня реально лучше использовать:

<br style="clear:both" />

И если вам не нужен какой-либо стиль в вашем html, вам просто нужно использовать класс для вашего перерыва и поместите .clear { clear:both; } в свой CSS.

Преимущество этого:

• Семантическое использование html для возврата к строке
• Если загрузка CSS не будет работать
• Не нужен дополнительный CSS-код и Hack
• Не нужно симулировать br с помощью CSS, он уже существует в HTML

Ответ 22

Предполагая, что вы используете эту структуру HTML:

<div id="container">
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

Вот CSS, который я бы использовал:

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

Я использую этот набор все время, и он отлично работает для меня, даже в IE6.

Ответ 23

Я всегда использую micro-clearfix:

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

В Cascade Framework Я даже применяю его по умолчанию для элементов уровня блока. ИМО, применяя его по умолчанию на элементах уровня блока, дает элементам уровня блока более интуитивное поведение, чем их традиционное поведение. Мне также стало намного легче добавить поддержку старых браузеров в Cascade Framework (которая поддерживает IE6-8, а также современные браузеры).

Ответ 24

В отличие от других clearfixes, здесь нет открытого контейнера без контейнеров

Другие clearfixes требуют, чтобы плавающий элемент находился в хорошо отмеченном контейнере или нуждался в дополнительном семантически пустом <div>. И наоборот, для четкого разделения контента и разметки для этой проблемы требуется строгое решение CSS.

Сам факт того, что нужно отметить конец поплавка, не позволяет автоматическую настройку CSS.

Если последнее является вашей целью, float должен быть оставлен открытым для чего угодно (абзацы, упорядоченные и неупорядоченные списки и т.д.), чтобы обернуть его, пока не появится "clearfix". Например, clearfix может быть установлен новым заголовком.

Вот почему я использую следующее clearfix с новыми заголовками:

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

Это решение широко используется на на моем веб-сайте, чтобы решить проблему: текст рядом с плавающей миниатюрой короткий, а верхний край следующего очищающего объекта не соблюдается.

Он также предотвращает любое ручное вмешательство при автоматическом создании PDF файлов с сайта. Ниже приведен пример страницы .

Ответ 25

Вы также можете поместить это в свой CSS:

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

*:first-child+html .cb{zoom: 1} /* for IE7 */

И добавьте класс "cb" в родительский div:

<div id="container" class="cb">

Вам не нужно добавлять что-либо еще к исходному коду...

Ответ 26

#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}

<div id="container">
  <div id="content">text 1 </div>
  <div id="sidebar">text 2</div>
  <div class="clear"></div>
</div>

Ответ 27

Это так просто. Clearfix очищает проблему, когда мы используем свойства float внутри элемента div. Если мы используем два элемента div, один из которых float: left; а другой как float: правильно; мы можем использовать clearfix для родителя элемента div. Если мы откажемся использовать clearfix, ненужные пробелы заполняются содержимым ниже и структура сайта будет нарушена.

Ответ 28

Вы пробовали это:

<div style="clear:both;"/>

У меня не было проблем с этим методом.

Ответ 29

Мой любимый метод - создать класс clearfix в моем документе css/scss ниже

.clearfix{
    clear:both
}

И затем назовите его в моем html-документе, как показано ниже

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>