Ясно: оба до конца блока

Question

Очень часто я в конечном итоге делаю что-то вроде этого:

<div class="one">
   <div class="floating-two">content</div>
   <div class="clear"></div>
</div>

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

Я ищу более чистый способ сделать это.В конце концов, «чистый» div - это просто стиль, который мы собираемся применить к «одному».Мы могли бы сделать:

.floating-two:after{
  clear:both;
}

Но это тоже не правильно.Floating-two не знает, могут ли другие блоки следовать за ним до закрытия "one".

Кто-нибудь разработал трюк для этого?

Answer 1

Вы можете сделать это двумя способами без добавления разметки (без <div class="clear"..> или эквивалента):

.one:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   height: 0;
}

OR

.one {
    overflow: hidden
}

Answer 2

Вы можете использовать overflow: hidden на внешнем элементе div, и он растянется на высоту, необходимую для содержания .floating-two.Пример возился здесь: http://jsfiddle.net/neilheinrich/rBBMp/6/

.one {
  overflow: hidden;
}

Answer 3

Вы должны добавить реальный элемент со свойством clear. Если вам не нравятся div, используйте <br>. Это самый короткий, действительный элемент, который не изменяет компоновку:

<br class="clear" />

Answer 4

РЕДАКТИРОВАТЬ

Я действительно считаю, что RobW прав, говоря, что вы не можете сделать это с: после, но вы можете сделать его более динамичным с помощью этого CSS:

http://jsfiddle.net/qQaQg/2

.one :last-child
{
  clear:both;
}