CSS: почему отступ или граница контейнера изменяют поведение вложенного плавающего элемента? - PullRequest
Новая
       17

CSS: почему отступ или граница контейнера изменяют поведение вложенного плавающего элемента?

3 голосов
/ 27 октября 2011

Может кто-нибудь объяснить, почему добавление отступа или границы к элементу контейнера влияет на отображение плавающего элемента div?

Образцы 1 и 4 показывают, как я ожидаю. Образцы 2 и 3 нет.

Это действительно сводит меня с ума!

Он ведет себя странно как в Webkit, так и в FireFox. Не проверял IE. 

<div style="">
    <div style="border: 1px solid green; float: right;">This float is correct</div>
    <h3 style="margin: 20px 0px; border: 1px solid blue;">Sample 1</h3>
    <p>Parent has nothing</p>
</div>

<div style="padding: 1px;">
    <div style="border: 1px solid green; float: right;">This float is incorrect</div>
    <h3 style="margin: 20px 0px; border: 1px solid blue;">Sample 2</h3>
    <p>Parent has padding</p>
</div>

<div style="border: 1px solid red;">
    <div style="border: 1px solid green; float: right;">This float is incorrect</div>
    <h3 style="margin: 20px 0px; border: 1px solid blue;">Sample 3</h3>
    <p>Parent has border</p>
</div>

<div style="padding: 1px;">
    <div style="border: 1px solid green; float: right;">This float is correct</div>
    <h3 style="margin: 0px 0px; border: 1px solid blue;">Sample 4</h3>
    <p>Parent has padding, H3 has no margin</p>
</div>

Ответы [ 2 ]

4 голосов
/ 27 октября 2011

То, что вы наблюдаете, - это «обрыв поля», который возникает, когда два элемента находятся друг над другом. Причина, по которой он исчезает, заключается в том, что вы добавляете границу или контур к одному из элементов. От W3C:

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

0 голосов
/ 27 октября 2011

Я думаю, что на самом деле 2, 3 и 4 отображаются так, как должно быть, а 1 выглядит немного странно.

  • 1, верхнее поле заголовка игнорируется, пока оно четко установлено.Это немного странно, поскольку в первом примере p учитывает поле h3.Добавление overflow: hidden к инкапсулирующему элементу div, похоже, сортирует его так, чтобы оно учитывало поле h3.
  • 2 и 3 поле h3 соблюдается
  • 4 Вы удалили стиль корыта поля.
...