HTML-поле выдвигает другие элементы

Question

может кто-нибудь ответить мне, ПОЧЕМУ, когда я устанавливаю на полях свой <div id="logo">, все остальные элементы делятся нажатием.И почему, если набор с плавающей точкой: слева от моего <div id="logo">, все работает нормально.

Answer 1

Это вызвано обвалом маржи .

Нормальный поток документов

В случае, когда <div id="logo"> не является плавающим, его верхнее поле фактически торчит из верхней части содержащего его элемента, что толкает все вниз. Причина такого поведения (как указано в статье выше) заключается в том, что если у вас есть серия абзацев со следующим CSS:

p {
   margin: 1em 0;
}

Они будут иметь только 1em поля между ними, а не 2em (что может быть результатом, если поля не сжимаются).

Поплавок Fix

Когда вы перемещаете <div id="logo">, он выводит его из обычного потока документов, что означает, что его верхнее поле больше не сворачивается с полем его родителя.

Исправления

Другими вариантами исправления коллапса полей в вашем случае будет добавление 1px верхнего / нижнего отступа или границы к вашему <div id="header">.

Answer 2

У вашего h1 есть запас по умолчанию (на сафари на моем компьютере это .67em). Это то, что заставляет все быть сброшенным.

попробовать:

h1{margin:0;}

Все исправит.

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

Кроме того, я ВСЕГДА использую сброс CSS, чтобы избежать этого. Сброс YUI работает очень хорошо.