У меня есть давняя проблема divобертывания двухколоночного макета. Моя боковая панель является плавающей, поэтому мой контейнер divне может обернуть содержимое и боковую панель.

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

Кажется, существует множество способов исправления ошибки в Firefox:

• <br clear="all"/>
• overflow:auto
• overflow:hidden

В моей ситуации единственное, что, кажется, работает правильно, это <br clear="all"/>решение, которое немного неопрятно. overflow:autoдает мне неприятные полосы прокрутки, и, overflow:hiddenбезусловно, должны иметь побочные эффекты. Кроме того, IE7, очевидно, не должен страдать от этой проблемы из-за его неправильного поведения, но в моей ситуации он страдает так же, как Firefox.

Какой метод в настоящее время доступен для нас, является наиболее надежным?

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

У 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' также является решением с явным исправлением, но не будет иметь полос прокрутки, однако использование обрезает hiddenлюбой контент, расположенный за пределами содержащего элемента.

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

Clearfix Reloaded

Тьерри Кобленц из CSSMojo написал: «Перезагружен самый последний код» . Он отметил, что отказавшись от поддержки 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, ваши существующие правила мешают рушится поля ".

Micro Clearfix

Самое последнее и всемирно принятое решение 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 */
}

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

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

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

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

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

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

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

Недостатки

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

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

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

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 для установки нового контекста форматирования блока, но для всех остальных они используют сгенерированные box ( ) с , который не устанавливает новый контекст форматирования блока. Это означает, что вещи не будут вести себя одинаково во всех ситуациях. Для объяснения того, почему это плохо, см. Все, что вы знаете о Clearfix, неправильно .:afterclear: both

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

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

Ноты

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

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

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

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

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

.container { overflow: hidden; }

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

.container { zoom: 1; }

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

Я нашел ошибку в официальном методе 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-макета ... Просто посмотрите на это - это очень интересно! http://www.yaml.de/en/home.html

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

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

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

С http://nicolasgallagher.com/micro-clearfix-hack/

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

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

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

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

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

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

Держитесь подальше от поплавков, когда это возможно

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

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

Неправильное поведение Float и сбой очищает

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

Вот снова исправление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

display: flow-root;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cf:after {
    clear: both;
}

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

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

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

Вам не нужно будет добавлять что-либо еще в ваш оригинальный код ...

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

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

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

Мой любимый метод - создать класс 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>

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