Победа над флоатами

Научился наконец справляться с флоатами в HTML/CSS. С ними была такая проблема: если вертикальный размер у флоата больше, чем у текста, который его обтекает, а действие происходит внутри div’а, выкрашенного в зеленый, скажем, цвет, то вертикальный размер этого div’а становится равным вертикальному размеру текста, плюс поля. То есть получается, что флоат, скажем картинка, вылазит за див снизу. Когда этот div выкрашен в зеленый цвет, то эту засаду сразу видно. Всё это прямо следует из:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.

© W3 Consortium

Это хоть и соответствует спецификации, но это бред. Решение проблемы: внутрь зеленого div’а добавляем в самом конце

<div class="fuck_w3c_standards"></div>

В CSS:

.fuck_w3c_standards {
  clear: both;
}