Падение маржи с плавающими элементами - PullRequest
1 голос
/ 19 апреля 2009

В соответствии со стандартом CSS 2.1 вертикальные поля плавающих элементов не должны сжиматься ни при каких соседних элементах.

См: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Но на самом деле это не то, что происходит во всех браузерах (FF, Safari, Opera и Chrome), кроме IE6 (хотя не пробовал с IE7 или IE8, хотя). Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
</head>
<body>
<div style="margin-bottom:10px;">HEADER</div>
<div style="float:left;width:100%;margin:10px 0px;">Floating div</div>
<div style="margin-top:10px;">FOOTER</div>
</body>
</html>

Добавление ясно: оба; для div нижнего колонтитула не имеет никакого значения.

Я не специалист по CSS, поэтому, пожалуйста, поправьте меня, если я не так понимаю

Редактировать:
Очевидно, мой вопрос вызвал некоторую путаницу. Приведенный выше код просто для демонстрации поведения, о котором я говорю, это не реальная проблема, решение которой я пытаюсь найти.

Ответы [ 2 ]

7 голосов
/ 19 апреля 2009

Ни в IE6, ни в стандартных браузерах поля float не рушатся вместе с его братьями и сестрами. Это правильно в соответствии с указанным стандартом.

Разница в визуализации обусловлена ​​интерпретацией IE6 того, какие поля текут вместе. (Если вы дадите каждому div цвет фона, вам будет легче увидеть, что здесь происходит.)

Два или более смежных вертикальных поля блоков блоков в нормальном потоке

С нормальным потоком , определенным таким образом:

Поскольку поплавок отсутствует в потоке, непозиционированные блоки блоков, созданные до и после блока поплавка, движутся вертикально, как если бы поплавок не существовал.

То есть они текут вместе и имеют смежные вертикальные поля, которые могут разрушаться. IE6 (и IE7 в режиме Quirks) ошибаются и думают, что поплавок разбивает поток, не вызывая коллапса.

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

0 голосов
/ 19 апреля 2009

Я получил разрешение (IE7, FF), добавив:

<div style="clear:both;"></div>

МЕЖДУ Плавающим div и Нижним колонтитулом.

[Edit:] Когда вы перемещаете элемент и ставите после него элемент, который хотите начать в начале следующего пробела, вы должны / должны использовать очищающий элемент. Зак тоже прав: если вы просто складываете div, вы не должны / не должны ничего плавать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...