Добавление overflow: hidden; к body должно решить вашу проблему.Он определяет новый контекст форматирования блока, как описано в этой статье: Магия переполнения: скрыто .
jsFiddle Demo (тег body автоматически добавляется jsFiddle, поэтому я не включил его в разметку HTML)
UPDATE (спасибо @clairesuzy): это решение не работает, если body имеет padding: 0.Пока я не найду лучшего способа, я могу только предложить добавить обертку вокруг двух элементов (по крайней мере, я заслуживаю сейчас @ Марселя внизу :)), который я все еще считаю чище, чем решения, опубликованные ОП.Обычно я в любом случае добавляю обертку к плавающим объектам (большую часть времени облегчает работу со старыми браузерами), в большинстве случаев ее не нужно добавлять намеренно, поскольку это логически и семантически необходимо.
Итак, на данный момент я могу придумать следующее:
<body style="padding: 0; margin: 0;">
<div id="container" style="overflow: hidden;">
<div style="float: right;">first</div>
<div style="margin-top: 2em;">second</div>
</div>
</body>
jsFiddle Demo
ОБНОВЛЕНИЕ 2 : после обдумывания и чтениякомментарии, я действительно думаю, что overflow: hidden (или что-то кроме overflow: visible) на контейнере является правильным решением.Единственное исключение, где он не работал для меня, это установка его на элемент body, что в любом случае является очень редкой ситуацией.В этих редких ситуациях вы можете попробовать использовать position: absolute; top: 0; right: 0; вместо плавающего.
Другой возможный обходной путь: я также обнаружил, что настройка display: inline-block; width: 100%; на body действительно работает.
jsFiddle Demo