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

Научился наконец справляться с флоатами в 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;
}
Подписаться на блог
Отправить
Дальше
3 комментария
Spectator 2003

А fuck_w3c_standards — это обязательно, без этого работать не будет?

Mash 2003
  1. На всякий случай:

RichInStyle.com — Proposals: Floats, an alternative perspective

Maxdesign.com — Floatutorial

Positioniseverything.net — Float: The Theory и  Flowing and Positioning: Two Page Models

  1. Это не бред. В некоторых случаях — крайне полезное свойство плавающих блоков.
  1. А вот %%<td style=«width: 1%»><u class=«hglday»>style=\«display: block; width: 100%\» onfocus=\«this.blur() 18</u></td>%% — бред. :)
Mash 2003

Хм... Как-то интересно %%<a href>%% был отработан. Может быть я и накосячил где... Половина пятого у нас. :)

Вот то, что постил (href=«url»):
http://www.richinstyle.com/proposals/floatproposal.html
http://css.maxdesign.com.au/floatutorial/index.htm
http://www.positioniseverything.net/articles/float-theory.html
http://www.positioniseverything.net/articles/flow-pos.html
http://imfo.ru/archive/2003/04/06/calendarTable

Мои книги