Почему левая марка прыгает?

Question

Я следую In Search of the Holy Grail, но у меня возникают проблемы с пониманием того, что происходит на самом деле в шаге 3.

Чтобы разорвать эту проблему вниз, я отключил поля/смещения «левых» и «правых» дивы. Это дает вам содержание вверху, а затем два других элемента, сидящих рядом друг с другом, как я ожидал бы [см. P1].

Затем я постепенно уменьшал маржу слева от «левого» div от 0px до -199px, что снова делает то, что я ожидаю [см. P2].

Но при -200px (ширина самого левого элемента) он поднимается доверху [см. P3], с левым краем на правом краю содержимого. Я бы ожидал, что он просто уйдет с ума.

Почему это вскочит? И если нет концептуального объяснения, почему, где он описывает эту функциональность в спецификации?

Изображения:

Р1

---

Р2

---

P3

Answer 1

Помните, что оба #content и #left (а также #right) всплывают.

Из-за природы поплавков они (или их содержимое) могут перекрываться. Это хорошо описано в this section of the spec и довольно легко понять. Если вы примените отрицательные поля к плавающему элементу, который находится рядом с другим поплавком, он просто переместится влево (аналогично относительному смещению left), над его родным братом.

В разделе, посвященном float property, вы найдете список «точных правил, регулирующих поведение поплавков». Теперь я не на 100% знаком с моделью с плавающей запятой, но эти пункты являются тем, что я считаю уместным:

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

7. Левая плавающая коробка с другим левым плавающим полем слева от нее может не иметь своего правого внешнего края справа от правого края его блока. (Неправильно: левый поплавок может не торчать на правом краю, если он не находится как можно дальше слева). Аналогичное правило выполняется для правых элементов.

8. Плавающий ящик должен быть размещен как можно выше.

9. Левая плавающая коробка должна быть поставлена ​​как можно дальше, насколько возможно, вправо-плавающее поле как можно правее. Более высокое положение предпочтительнее, чем выше, чем слева или справа.

Так что я думаю: а запас -200px, который, как вы говорите, отрицательный эквивалент ширины самого #left элемента, заставляет его плавать весь путь до и к правой (а не влево) и обнять край элемента #center, который сам также плавает. Правый край обоих элементов касается друг друга из-за этого полного, равного отрицательного поля. Следовательно, по мере того как вы продолжаете увеличивать (или уменьшать?) Отрицательную маржу, вы увидите, что элемент #left продолжает двигаться влево.

Обратите внимание, что прокладка, применяемая к элементу #container, не взаимодействует с полями; даже если вы удалите прокладку с обеих сторон или с обеих сторон, поля будут взаимодействовать одинаково.

---

_{Отметим также, что есть заявление, в разделе, посвященном collapsing margins в связанном разделе спецификации, которая описывает поведение отрицательных полей, но это не имеет значения, как границы мы имеем дело с здесь являются горизонтальными и относятся к элементам с плавающей точкой и поэтому никогда не подвергаются разрушению.}

Answer 2

вы используете <h2> тег для левого и правого заголовка, но в центре вы используете <h1>, поэтому у вас есть эта проблема, если вы хотите, чтобы решить эту проблему, сделать одну вещь 1 использовать все <h2> тег для заголовка, и если вы хотите использовать затем применить ниже класса на

h1 
{ 
margin-top:10px; 
}