Как я могу использовать «float: left» в div, не нарушая высоту содержащего элемента?

Question

Кажется, что плавающие элементы HTML не увеличивают высоту своих контейнеров. Например, рассмотрим следующий код:

.portfoliosite {
    background: #777;
    padding: 10px;
    width: 550px;
}
.portfoliothumbnail {
    background: red;
    margin: 0 10px 10px 0;
    float: left;
    height: 150px;
    width: 150px;
}

<div class="portfoliosite">
    <div class="portfoliothumbnail"><!-- Img tag goes here --></div>        
    <p class="portfoliotitle">AwesomeSite.Com</p>
    <p class="portfoliodescription">An awesome site I did. It launched on Jan 1, 2009</p>        
</div>

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

Существует ли элегантное решение для этого, предпочтительно не требующее установки фиксированной высоты или использования JavaScript?

Answer 1

Добавить overflow: auto на содержащий элемент:

.portfoliosite {
    background: #777;
    padding: 10px;
    width: 550px;
    overflow: auto;
}
.portfoliothumbnail {
    background: red;
    margin: 0 10px 10px 0;
    float: left;
    height: 150px;
    width: 150px;
}

<div class="portfoliosite">
    <div class="portfoliothumbnail"><!-- Img tag goes here --></div>        
    <p class="portfoliotitle">AwesomeSite.Com</p>
    <p class="portfoliodescription">An awesome site I did. It launched on Jan 1, 2009</p>        
</div>

См .: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats

Answer 2

Да. Вы должны очистить свой float после закрытия div.

<div>
  <div style="float:left">Floated Div</div>
  <div style="clear:both;" />
</div>

Answer 3

Вам нужно очистить число с плавающей точкой, которое вернет поток документов в нормальное состояние. Используйте clear:left (или вправо, или оба, если такие поплавки должны быть очищены) на последнем элементе, который должен сбросить поток. Также читайте о ClearFix . Следует отметить, что ClearFix может немного зацикливаться на IE ... если у вас есть контроль над разметкой, иногда безопаснее использовать традиционный clear.

Answer 4

Я настоятельно рекомендую НЕ использовать такие хаки, как ClearFix. Если вы пытаетесь сохранить

, потому что это не "семантическое", вы создадите себе проблему в дальнейшем. Лучше всего, если вы знаете, что ваш макет не изменится, или вы можете точно сказать, что представляет собой следующий элемент, вы можете использовать следующий элемент, чтобы очистить предыдущие «поплавки». Если вам нужно что-то модульное, например фрагмент HTML, который можно вставить в разные места, всегда добавляйте очищающий DIV.

Также относительно комментария Дэвида:

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

Будьте осторожны, так как это недопустимый HTML или XHTML. Хотя это кажется действительным с точки зрения XML, оно не учитывает определение документа (как бы оно ни называлось, на которое ссылается тег DOCTYPE). Другими словами, DIV определяется как элемент, который открывается и закрывается отдельным закрывающим тегом. В отличие от
например, который допускает «самозакрытие». Конечно, Firebug и, возможно, другие инструменты для веб-разработчиков иногда отображают DIV, но только так они это отображают.

PPS: на моей работе я обнаружил, что это хорошо работает в некоторых макетах, чтобы исправить несовместимые вертикальные интервалы между элементами при очистке DIVs в IE6 и других браузерах:

Кросс-браузерная очистка:

div.clear { clear:both; overflow:hidden; height:0; }

<div class="clear"></div>

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

Answer 5

Вам нужно очистить поплавок Очистить Исправить

Дополнительная информация

Answer 6

Хорошо отображается в моем IE7 на Vista. Какую версию IE и какую платформу вы используете?