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

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

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

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

Вы должны исправить это так:

/* 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

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

.container { overflow: hidden; }

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

.container { zoom: 1; }

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

Использование 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.

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

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

• CSS Flexbox
• 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>

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

Использование «overflow: hidden» также является решением 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", исправление для современных браузеров

Тьерри Кобленц из CSS Mojo указал, что при нацеливании на современные браузеры мы теперь можем отбросить свойства / значения zoom и ::before и просто использовать:

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

Это решение не поддерживает IE 6/7… специально!

Тьерри также предлагает: «Слово предостережения: если вы начинаете новый проект с нуля, действуйте, но не меняйте эту технику на ту, что у вас есть сейчас, потому что даже если вы не поддерживаете oldIE, ваши существующие правила предотвращают сокращение полей. "

Микро Клирфикс

Самое последнее и всемирно принятое решение clearfix - Micro Clearfix от Николаса Галлахера.

Известная поддержка: 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 */
}

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

ПИРОГ: простой метод очистки

Этот более старый метод «легкой очистки» имеет то преимущество, что позволяет позиционированным элементам выходить за пределы контейнера за счет более хитрого 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" />, разбросанные по разметке.

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

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

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

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

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

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

Я рекомендую использовать следующее, взятое из 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;  
}

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

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

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

Вы также можете поместить это в свой 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">

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

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

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

.cf:after {
    clear:both;
}

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

It's known to work in Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. This ensures that there is visual consistency with IE 6/7 when zoom:1 is applied.

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

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

Для меня действительно лучше использовать:

<br style = "clear:both" />

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

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

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

Предполагая, что вы используете эту структуру 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.

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

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

При плавании вещей следует учитывать два важных момента:

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

   

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

   

Контексты форматирования блоков

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

Есть несколько способов установить контекст форматирования блока, но я рекомендую display: inline-block с 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, неверно.

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

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

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

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

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

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

С 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();
}

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

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

Ноты

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

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

Это чистое исправление было объявил и объяснил Тьерри Кобленц в июле 2012 года. Оно избавляет от ненужного веса Микроочиститель Николя Галлахера 2011 года. В процессе он освобождает псевдоэлемент для вашего собственного использования. Он был обновлен для использования display: block, а не display: table (опять же, кредит Тьерри Кобленца).

Я всегда использую микро-клирфикс:

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

.cf:after {
    clear: both;
}

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

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

С SASS устранение проблемы:

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

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

.container {
    @include clearfix;
}

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

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

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

По возможности держитесь подальше от поплавков

Стоит отметить, что я избегаю таких случаев, как лихорадка Эбола. Есть много причин, и я не одинок; Прочтите ответ Рикудо о что такое 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 практика очистки числа с плавающей запятой с помощью <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;
}

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

Почему тебе должно быть до этого дело? Примерно 80% (или более) используемых устройств - это мобильные устройства с маленькими экранами. Настольные компьютеры / ноутбуки больше не король.

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

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

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 в его простейшей форме. Другими словами, он будет держать ваш плавающий контейнер под контролем и предотвращать затопления. Наконец, он обеспечивает поддержку старых браузеров в одном маленьком каратэ =)

И снова clearfix

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

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

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

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

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

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

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

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

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

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

.clearfix{
    clear:both;
}

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

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

  <!-- Let's 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>

Новое отображаемое значение кажется заданию в одну строку.

display: flow-root;

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

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

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

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