Ответ 1
Поляризованные элементы не добавляют к высоте в элементе контейнера, и, следовательно, если вы не очистите их, высота контейнера не увеличится...
Я покажу вам визуально:
Подробнее Объяснение:
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
beside the top div. Why? Because 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
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;
}
Как работает Float CSS?
Что такое float точно и что он делает?
-
Свойство
floatнедопонимается большинством новичков. Ну, что именно делаетfloat? Первоначально было введено свойствоfloatдля потока текста вокруг изображений, которые плаваютleftилиright. Здесь другое объяснение by @Madara Uchicha.Итак, неправильно ли использовать свойство
floatдля размещения бок о бок? Ответ нет; нет проблем, если вы используете свойствоfloatдля установки бок о бок. -
Плавающий элемент уровня
Демонстрацияinlineилиblockзаставит элемент вести себя как элементinline-block. -
Если вы плаваете любой элемент
leftилиright, элементwidthэтого элемента будет ограничен содержимым, которое он содержит, если толькоwidthне определено явно... -
Вы не можете
floatсоздать элементcenter. Это самая большая проблема, которую я всегда видел у новичков, используяfloat: center;float.floatобычно используется дляfloat/перемещения содержимого влево или вправо. Существует только четыре допустимых значения для свойстваfloati.eleft,right,none(по умолчанию) иinherit. -
Родительский элемент сворачивается, когда он содержит плавающие дочерние элементы, чтобы предотвратить это, мы используем свойство
clear: both;, чтобы очистить плавающие элементы на обеих сторонах, что предотвратит свертывание родительского элемента элемент. Для получения дополнительной информации вы можете отправить мой другой ответ здесь. -
(Важно) Подумайте об этом, где у нас есть стек из различных элементов. Когда мы используем
float: left;илиfloat: right;, элемент перемещается над стеком на единицу. Следовательно, элементы в нормальном потоке документов будут скрываться за плавающими элементами, поскольку они находятся на уровне стека над нормальными плавающими элементами. (Пожалуйста, не связывайте это сz-index, поскольку это совершенно другое.)
В качестве примера рассмотрим пример, объясняющий работу CSS-поплавков, предполагая, что нам нужен простой макет из двух столбцов с заголовком, нижним колонтитулом и двумя столбцами, поэтому вот что выглядит синяя печать...
В приведенном выше примере мы будем плавать только в красных прямоугольниках, либо вы можете float как на left, либо можете float на left, а другое - на right, зависит от макета, если это 3 столбца, вы можете float 2 столбца на left, где это зависит от другого в right, хотя в этом примере мы имеем упрощенную компоновку с двумя столбцами, поэтому будет 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.
Прежде всего, мы используем основной элемент-оболочку, вы можете просто предположить, что это ваш viewport, чем мы используем header и присваиваем height 50px, поэтому ничего необычного там нет.. Это просто нормальный, который будет занимать горизонтальное пространство 100%, если он не будет плавать, или присвоить ему inline-block.
Первое допустимое значение для float равно left, поэтому в нашем примере мы используем float: left; для .floated_left, поэтому мы намерены поместить блок в left нашего элемента контейнера.
И да, если вы видите, родительский элемент, который является .wrapper, рушится, тот, который вы видите с зеленой рамкой, не расширялся, но это должно быть правильно? Вернемся к этому через некоторое время, пока у нас есть столбец, плавающий до left.
Приступая ко второму столбцу, дайте ему float этот номер right
Еще один colummn плавает вправо
Здесь у нас есть столбец 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>
Ну, это исправление очень хорошо, ни один скомпенсированный родитель больше, но он добавляет ненужную разметку в DOM, поэтому некоторые предлагают использовать overflow: hidden; для родительского элемента, содержащего дочерние элементы с плавающей точкой, которые работают по назначению.
Используйте overflow: hidden; on .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, который будет равен размеру левого плавающего столбца i.e 200px wide.