megafon4u.ru

Одной из самых распространённых проблем у начинающих верстальщиков является проблема нестандартного поведения блока, при применении свойства float.
Первая и самая распространённая проблема, это нестандартное поведение блока при применении этого свойства к его дочерним элементам. Согласно спецификации, элементы, определённые, как блоковые, располагается друг за другом вертикально, начиная с верхнего края контейнера. Проще говоря один под другим.
Так и есть на самом деле.
Возьмем такой код
HTML:

<div>
   <p class="green"><img src="img/ptishka.gif" width="106" height="119" alt="img" />Текст, который обтекает изображение</p>
   <p class="blue"><img src="img/ptishka.gif" width="106" height="119" alt="img" />Текст, который обтекает изображение</p>
</div>

CSS:

.green {background-color: #0F0;}
.blue  {background-color: #00F;}
img {display: block;float: left;height: 68px;width: 58px;}

При применении свойства float к любому дочернему элементу мы увидим следующее:

Можно посмотреть здесь.

Так же это можно увидеть, если представить следующий пример, где есть контейнер с background-color{#"любой цвет"}, изображение со свойствами {display:block; float: left; } и параграф с текстом, который обтекает это изображение.

Здесь видно, что родительский элемент схлопывается по размеру параграфа, а изображение выходит за его пределы.
Решение этой проблемы очень простое. Следуя одному из аспектов перемещаемых элементов, опять же изложенных в спецификаци CSS2.1( перемещаемый элемент увеличивается, чтобы вместить всех перемещаемых потомков), мы поступим следующим образом. Следует задать для родительского элемента (в нашем случае для параграфа) следующие свойства.

p {float: left; width:100%}

и всё встанет на свои места.
пример здесь.

Ещё один способ, который тоже решает эту проблему:

p {overflow: hidden; width:100%}

Почему я делаю именно так? Для IE6 достаточно только width:100%, вот пример.
А для остальных браузеров достаточно только overflow: hidden;. пример здесь.
Чтобы не писать отдельных правил для IE6, я применяю эти два правила в одной связке.
пример здесь
PS: Для IE6 можно еще height:1% или zoom:1

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

Или здесь (Только в IE6-7)

Это происходит из-за того, что IE использует нестандартное поведение относительно блочной модели и единиц измерения.
Я знаю два решения этой проблемы:
Первое: Holly Hack: назначение высоты к элементу, i.e. height: 1%;. Пожалуйста, вот результат
Второе: применить то же решение, которым мы воспользовались в начале статьи

div {float: left; width:100%}

всё сразу встанет на свои места, причём в всех браузерах, вот, пожалуйста
Естественно, из-за width:100%, контейнеру нельзя назначать поля и границы. Появится полоса прокрутки. Ну а как и куда их воткнуть, это ваше домашнее задание.

В IE 6 есть ещё один очень странный баг. Он возникает при использовании нескольких плавающих элементов. Текст последнего плавающего элемента, иногда дублируется после него. Причина - комментарий, заключенный между плавающими элементами.

Недавно столкнулся ещё с одним багом в IE6, о котором честно говоря не знал.
Проблема следующая, если блок имеет свойcтво float и margin, то IE6 удваивает значение margin той стороны, которая указана во float.
Пример здесь
Существует несколько способов решения этой проблемы, в том числе и пресловутый хак для осла, в котором можно уменьшить маргин на столько, сколько необходимо.

* html content { margin-left: 5px; }

Пример здесь

Однако, мой вариант мне кажется более интересным. Здесь я пошёл по уже много раз проверенному принципу. Очень многие проблемы, связанные с полями и отступами в IE6, решаются обёртыванием проблемного элемента или проще говоря, контейнера, которому и назначаем этот размер, только уже не margin, а padding.

HTML:

<div class="container">
 <div class="content">
 </div>
</div>

CSS:

.container { padding-left: 10px; }
.content   { float: left; }

Пример здесь

На заметку: вообще, при использовании display:inline, большинство багов в IE пропадают.