Плавающие элементы не увеличивают высоту элемента контейнера, и поэтому, если вы их не очистите, высота контейнера не увеличится ...
Я покажу вам визуально:
Более объяснение:
<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Свойство понято большинство начинающих. Ну, что именно делает float? Первоначально floatсвойство было введено для обтекания текста вокруг изображений, которые плавают leftили right.Вот еще одно объяснение @Madara Uchicha.
Итак, неправильно ли использовать floatсвойство для размещения боксов рядом? Ответ - нет ; Нет проблем, если вы используете floatсвойство для установки боксов рядом.
Плавающий элемент inlineили blockуровень заставит элемент вести себя как inline-blockэлемент.
демонстрацияЕсли вы перемещаете элемент 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 столбцов с верхним и нижним колонтитулами и двумя столбцами, поэтому вот как выглядит план ...
В приведенном выше примере, мы будем плавающей только красные коробки, либо вы можете floatкак к left, или вы можете floatна left, и другое , rightа также, в зависимости от расположения, если это 3 колонки, вы можете float2 колонки к 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;
}
Давайте пошагово рассмотрим макет и посмотрим, как работает float.
Прежде всего, мы используем основной элемент обертку, можно только предположить , что это ваше окно просмотра, то мы используем 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>до .wrapper divконца, как
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
демонстрация
Что ж, это исправляет очень хорошо, больше не свернутый overflow: hidden;родительский элемент , но он добавляет ненужную разметку в DOM, поэтому некоторые предлагают использовать для родительского элемента, содержащего плавающие дочерние элементы, которые работают как задумано.
Использовать overflow: hidden;на.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
демонстрация
Это экономит нам элемент каждый раз, когда нам нужно, clear floatно, поскольку я тестировал различные случаи с этим, он потерпел неудачу в одном конкретном случае, который использует box-shadowдочерние элементы.
Демо (не вижу тени со всех четырех сторон,overflow: hidden; вызывает эту проблему)
И что теперь? Сохраните элемент, нет, overflow: hidden;так что используйте хак для ясного исправления, используйте приведенный ниже фрагмент кода в своем CSS, и точно так же, как вы используете overflow: hidden;для родительского элемента, вызовите classниже для родительского элемента для самоочищения.
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
демонстрация
Здесь тень работает как задумано, также она самостоятельно очищает родительский элемент, который предотвращает свертывание.
И, наконец, мы используем нижний колонтитул после того, как мы clearиспользовали плавающие элементы.
демонстрация
Когда float: none;используется в любом случае, как это по умолчанию, так что любое использование для объявления float: none;?
Ну, это зависит от того, хотите ли вы использовать адаптивный дизайн, вы будете использовать это значение много раз, когда хотите, чтобы ваши плавающие элементы отображались один под другим с определенным разрешением. Для этогоfloat: none; свойства играет важную роль там.
Несколько реальных примеров того, как floatэто полезно.
- Первый пример, который мы уже видели, - это создание одного или нескольких макетов столбцов.
- Использование
imgплавающего внутри, pчто позволит нашему контенту обтекать.
Демо (без плавающихimg)
Демо 2 (imgвсплыл наleft)
- Использование
floatдля создания горизонтального меню - Демо
Также поплавайте второй элемент или используйте `margin`
И последнее, но не менее важное, я хочу объяснить этот конкретный случай, когда вы floatтолько один элемент, leftно вы неfloat другой - нет, так что же происходит?
Предположим, что если мы удалим float: right;из нашего .floated_right class, то divрендеринг будет экстремальным, leftпоскольку он не является плавающим.
демонстрация
Таким образом , в данном случае, либо вы можете floatк leftа
ИЛИ
Вы можете использовать, margin-leftкоторый будет равен размеру левого плавающего столбца, т.е. 200pxширокий .