Почему плавающий элемент не отсоединяется от потока документов, если его контейнер не имеет высоты?

Question

<form style="background-color:pink; height:100px">
        <label for="button-test">Add your name here</label>
        <input type="text" id="button-test" name="button" placeholder="add your name here">
    <div style="display:inline-block; height:">
        <input class="button-image" type="image" src="submit.png" alt="image button" width="40" height="40">
    </div>
</form>

и CSS:

.button-image {

    margin-left:20px;
    float:right;
    margin-top:px;
    }

Если я не добавляю высоту в контейнер div и пытаюсь добавить margin-top к дочернему элементу «button-image», все 3 элемента перемещаются вниз. Но если я добавлю высоту к контейнеру div изображения кнопки, теперь margin-top перемещает только элемент изображения кнопки, а два других остаются на месте.

Я специально сделал элемент "button-image" плавающим, чтобы иметь возможность сдвинуть его немного вниз, не перемещая другие 2. Так как все 3 являются элементами встроенного блока, устанавливаю margin-top на любом из них переместит все 3 вниз, потому что им нужно поддерживать поток do c. Я думал, что создание плавающего элемента изображения кнопки выведет его из потока do c, и я смогу перемещать его свободно, не влияя на другие. Но я обнаружил, что, если контейнер div не имеет высоты, все 3 элемента снова перемещаются вниз, когда я устанавливаю margin-top для плавающего элемента «изображение кнопки». Это почему? Разве этот элемент не должен быть плавающим и, следовательно, быть вне потока документов и, следовательно, не влиять на другие? Почему установка верхнего края поля заставляет другие элементы двигаться вместе с ним? Если я добавлю к контейнеру div всего 1 пиксель, теперь перемещается только плавающий элемент.

Может кто-нибудь объяснить, какая разница в высоте в этом случае?

Answer 1

Из CSS 2.2 SPE c:

10.6.7 'Авто' высоты для корней контекста форматирования блока

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

Это то же правило, что и overflow:hidden на block box содержат float, похожий на clearfix.

Все элементы inline-block являются корнями контекста форматирования блока, поэтому это правило применяется к ним, когда вы не указываете высоту, потому что высота по умолчанию - auto .

Затем в самом конце Раздел 10 spe c говорит:

Базовая линия 'inline-block' - это базовая линия его последнего линейного блока в нормальном потоке, если только он не имеет ни одного проходного линейного бокса или если его свойство 'overflow' имеет вычисленное значение, отличное от 'visible', и в этом случае базовой линией является край нижнего поля.

В вашем примере inlin Электронный блок содержит только поплавок, поэтому у него нет проходных линий, и поэтому его базовая линия является его нижним краем поля. Он не имеет нижнего отступа, границы и поля, поэтому его базовая линия также является его нижним краем содержимого.

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

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

---

Чтобы избежать этого, применяется обычный метод нарушения базового вертикального выравнивания между встроенными элементами, например, путем установки встроенного блока в vertical-align:top