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

я покажу вам визуально:

Другое Объяснение:

<div>
  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        besides the top div. Why? Because of the top div 
                                        is floated left, making the 
                                        rest of the space blank -->

  <div style="clear: both;"></div> 
  <!-- Now in order to prevent the next div from floating beside the top ones, 
       we use `clear: both;`. This is like a wall, so now none of the div's 
       will be floated after this point. The container height will now also include the 
       height of these floated divs -->
  <div></div>
</div>

вы также можете добавить overflow: hidden; на элементах контейнера, но я бы предложил вам использовать clear: both; вместо.

также, если вы могли бы как самоочищение элемента, который вы можете использовать

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

---

как работает CSS Float?

что такое float точно и что он делает?

• The float свойство неправильно понимается большинством новичков. Ну а что именно делает float делать? Первоначально,float свойство было введено для потока текста вокруг изображений, которые плавают left или right. вот еще одно объяснение автор @Madara Uchicha.

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

• плавучая inline или block элемент уровня заставит элемент вести себя как inline-block элемент.

  Demo

• если вы плаваете элемент left или right на width элемент будет ограничен содержимым, которое он содержит, если width четко определено ...

• вы не можете float элемент center. Это самая большая проблема, которую я всегда видел с новичками, используя float: center;, который не является допустимым значением для float собственность. float обычно float / переместить содержимое в самый левый, ни право. Есть только четыре допустимые значения float собственность мне.е left,right,none (по умолчанию) и inherit.

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

• (важно) подумайте об этом, где у нас есть стек различных элементов. Когда мы используем float: left; или float: right; элемент перемещается над стеком на единицу. Следовательно, элементы в нормальном потоке документов будут скрываться за плавающими элементами, потому что они находятся на уровне стека выше нормального плавающий элемент. (пожалуйста, не связывайте это с z-index а это совершенно другое.)

---

принимая случай в качестве примера, чтобы объяснить, как CSS плавает работать, предполагая, что нам нужен простой макет 2 столбца с заголовком, нижним колонтитулом и 2 столбцами, так вот как выглядит схема элементов...

в приведенном выше примере мы будем плавать только красные ящики, либо вы можете float как left, или float на left, а другой right а также, зависит от макета, если это 3 колонки, вы можете float 2 колонки к left где еще один right так зависит, хотя в этом примере, у нас есть упрощенный Макет 2 столбца так будет float один left, а другой right.

разметка и стили для создания макета объяснены ниже...

<div class="main_wrap">
    <header>Header</header>
    <div class="wrapper clear">
        <div class="floated_left">
            This<br />
            is<br />
            just<br />
            a<br />
            left<br />
            floated<br />
            column<br />
        </div>
        <div class="floated_right">
            This<br />
            is<br />
            just<br />
            a<br />
            right<br />
            floated<br />
            column<br />
        </div>
    </div>
    <footer>Footer</footer>
</div>

* {
    -moz-box-sizing: border-box;       /* Just for demo purpose */
    -webkkit-box-sizing: border-box;   /* Just for demo purpose */
    box-sizing: border-box;            /* Just for demo purpose */
    margin: 0;
    padding: 0;
}

.main_wrap {
    margin: 20px;
    border: 3px solid black;
    width: 520px;
}

header, footer {
    height: 50px;
    border: 3px solid silver;
    text-align: center;
    line-height: 50px;
}

.wrapper {
    border: 3px solid green;
}

.floated_left {
    float: left;
    width: 200px;
    border: 3px solid red;
}

.floated_right {
    float: right;
    width: 300px;
    border: 3px solid red;
}

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

давайте шаг за шагом с макетом и посмотрите, как работает поплавок..

прежде всего, мы используем основной элемент оболочки, вы можете просто предположить, что это ваш видовой экран, затем мы используем header и назначить height на 50px так что ничего особенного. Это просто нормальный не плавающий элемент уровня блока, который займет 100% горизонтальное пространство, если оно не плавает или мы назначаем inline-block к нему.

первое допустимое значение для float и left так, в нашем примере, мы используем float: left; на .floated_left, так что мы намерены плавать блок к left наших элемента-контейнера.

колонна поплыла влево

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

переходя ко второй колонке, давайте ее float этот right

еще одна колонна поплыла вправо

у нас 300px широкий столбец, который мы float до right, который будет сидеть рядом с первой колонной, как он плавал в left, и так как он плавал в left, он создал пустой желоб для right, и так как было достаточно места на right, наш right плавающий элемент сидел идеально рядом с left один.

тем не менее, родительский элемент свернут, ну, давайте исправим это сейчас. Существует много способов предотвратить сворачивание родительского элемента.

• добавить пустой элемент уровня блока и использовать clear: both; прежде чем родительский элемент заканчивается, который содержит плавающие элементы, теперь это дешевое решение для clear ваши плавающие элементы, которые сделают работу за вас, но я бы рекомендовал не использовать это.

добавить <div style="clear: both;"></div> до .wrapperdiv заканчивается, как

<div class="wrapper clear">
    <!-- Floated columns -->
    <div style="clear: both;"></div>
</div>

Demo

Ну, это исправляет очень хорошо, больше нет свернутого родителя, но он добавляет ненужную разметку в DOM, поэтому некоторые предлагают использовать overflow: hidden; на родительском элементе холдинга плавали дочерние элементы, которые работают по назначению.

использовать overflow: hidden; on .wrapper

.wrapper {
    border: 3px solid green;
    overflow: hidden;
}

Demo

это экономит нам элемент каждый раз, когда мы надо clearfloat но поскольку я тестировал различные случаи с этим, он потерпел неудачу в одном конкретном, который использует box-shadow на дочерних элементах.

Demo (не вижу тени со всех 4-х сторон,overflow: hidden; вызывает эту проблему)

Ну и что теперь? Сохранить элемент, нет overflow: hidden; так что идите на четкое исправление Хака, используйте приведенный ниже фрагмент в вашем CSS, и так же, как вы используете overflow: hidden; для родительского элемента, называют class ниже на родителей элемент для самоочищения.

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

<div class="wrapper clear">
    <!-- Floated Elements -->
</div>

Demo

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

и, наконец, мы используем нижний колонтитул после того, как мы clear плавающие элементы.

Demo

---

когда float: none; используется в любом случае, так как он используется по умолчанию, так что ли объявить float: none;?

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

---

несколько реальных примеров того, как float полезно.

• первый пример, который мы уже видели, заключается в создании одного или нескольких столбцов макеты.
• используя img плавали внутри p что позволит нашему контенту течь вокруг.

Demo (без плавающей img)

Demo 2 (img поплыл к left)

• используя float для создания горизонтального меню - Demo

---

поплавок второй элемент, а также, или использовать 'margin'

и последнее, но не менее важное, я хочу объяснить этот конкретный случай, когда вы float только один элемент left а не float другое, так что же происходит?

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

Demo

в этом случае, либо вы можете float до left а также

или

вы можете использовать margin-left который будет равен размеру левого плавающего столбца, т. е. 200px широкое.