overflow:auto;
на содержащем div делает все внутри него (даже плавающие элементы) видимым, а внешний div полностью оборачивается вокруг них. См. Этот пример:
.wrap {
padding: 1em;
overflow: auto;
background: silver;
}
.float {
float: left;
width: 40%;
background: white;
margin: 0 1%;
}
<div class="wrap">
<div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
<div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
</div>
overflow
был добавлен). Исправлено удалениемoverflow: auto;
из класса, а такжеheight
селектораЕсть несколько способов очистить поплавки. Вы можете проверить некоторые здесь:
http://work.arounds.org/issue/3/clearing-floats/
Например,
clear:both
может сработать для васисточник
overflow: auto;
содержимое (например, украшения фокуса) будет обрезаться, выходя за пределы элемента, но этого не произойдет.Во многих случаях
overflow: auto;
этого будет достаточно, но для завершения и поддержки кроссбраузерности обратите внимание на Clearfix, который выполнит эту работу для всех браузеров.Давайте рассмотрим следующую разметку ..
Наряду со следующими стилями ..
.content { float:left; }
.clearfix { ..from link.. }
Без clearfix у родителя
div
не было бы высоты из-за плавающих дочерних элементов . Clearfix заставит родителя рассмотреть плавающих детей.источник
overflow: auto;
Я подумал, что отличный способ сделать это - установить
display: table
в div.источник