В этой статье рассматривается ряд нештатных ситуаций, возникающих при использовании CSS свойства float. Данное свойство применяется для смещения форматируемого элемента в правую или левую сторону и обтеканием его другими элементами, входящими в общий поток документа с противоположной стороны. Причем, справедливо будет заметить, что почти все рассматриваемые в статье ситуации (баги), касаются браузера IE ранних версий.

IE6 ведет себя странно в том случае, если отображается страница, имеющая в своем составе элемент контейнер, в пределах которого содержится плавающий блок, обтекаемый контентом. Баг заключается в том, что обтекающий контент временами просто исчезает. Причем все становиться на свои места, если переключиться на другое окно или проскролить окно браузера вниз и затем вернуться в начальную позицию. Последующая, седьмая версия IE не допускает подобной ошибки.

Еще один баг имеет место в Internet Explorer если элемент контейнер после плавающего блока содержит гиперссылки, которые подсвечиваются при наведении курсора. И именно в момент наведения мышки на ссылку (hover) нижняя граница контейнера примыкает к нижней кромке контента, который обтекает плавающий блок. При наведении на другие ссылки документа, дефект исчезает. Этот баг имеет название Guillotine Bug и проявляется только в том случае, если меняется фон ссылки, свойства шрифта, содержащегося в ней текста или размеры ее отступов и полей.

Из за того, что IE применяет нестандартные методы отображения блочной модели и некорректно интерпретирует единицы измерения, некоторые документы, содержащие вложенные в блочный элемент контейнер группу плавающих элементов отображаются не верно. В этом случае, если контейнер обладает явно установленными границами и полями, то в нем будет содержаться только один, последний ряд плавающих объектов и крайние, расположенные справа объекты будут урезаться границей окна документа. И как следствие последнего дефекта появится горизонтальная полоса прокрутки Следующий баг (Three Pixel Text-Jog) также имеет место в IE. В этом случае все элементы, имеющие свойство float со значением left отображаются с правой границей в 3 пикселя, которую невозможно убрать.

Если в IE6 между несколькими плавающими элементами в коде документа размещены комментарии, то текст (контент) последнего плавающего блока может повторно отображаться после него. Этот баг называется Duplicate Character Bug Одновременное использование CSS свойств float и clear (свойство, отменяющее обтекание элемента) в пределах одного элемента, приводит к тому, что между обтекающим контентом и тем, который отображается в обычном потоке, возникают большие промежутки. Баг имеет место в IE. В некоторых случаях Internet Explorer сдвигает строчные элементы, граничащие с плавающим блочным элементом, относительно предполагаемых позиций. Если у плавающего блока, обтекаемого слева (float: left) установить значение свойству margin, тем самым отодвигая его от левой границы контейнера, то IE удваивает значение установленного внешнего отступа. Баг IE Doubled Float-Margin Bug. Также необходимо отметить ряд проблем возникающих в браузере Safari версий 1.3 и 2.0, связанных с использованием свойства float в комбинации с отрицательными значениями полей элемента, что приводит к сложностям активации и выделения ссылок, размещенных в плавающем элементе.

Одним из радикальных путей обхода багов, связанных с браузером IE является использование свойства display со значением inline для плавающих элементов. Стандартами установлено, что свойство display у плавающих элементов автоматически получает значение block и остальные значения кроме none для него игнорируются. Но если для таких элементов определить свойство display со значением inline, то способ представления элемента не изменится, но это позволит избежать большинства проблем в браузере Internet Explorer.