Поплавки и горизонтальные поля

Question

У меня есть следующий CSS:

label{
    float:left;
    margin-left:24px;
}

button{
    margin-left:24px;
}

для этого HTML:

<label>
    <input>
</label>
<button>

, и я надеялся, что кнопка была найдена на расстоянии 24 пикселей от метки,однако этого не произошло, пока я не отпустил кнопку влево.На какую часть спецификации CSS я могу ссылаться, чтобы понять, почему это происходит?

(Пожалуйста, извините, мой английский.)

Answer 1

Просто прочитайте документацию W3C для float:

Вот точные правила, регулирующие поведение поплавков:

1. левый внешний край плавающего слева блока не может находиться слева от левого края содержащего его блока.Аналогичное правило справедливо для элементов с плавающей справа.
2. Если текущий блок является плавающим слева, и есть какие-либо блоки с плавающей точкой слева, созданные элементами ранее в исходном документе, то для каждого такого более раннего блока либолевый внешний край текущего блока должен находиться справа от правого внешнего края предыдущего блока, или его верх должен быть ниже, чем нижний край предыдущего блока.Аналогичные правила действительны для плавающих справа прямоугольников.
3. Правый внешний край плавающего влево прямоугольника может быть не правее левого внешнего края любого справа плавающего прямоугольника, который находится рядом с ним.Аналогичные правила действительны для плавающих справа элементов.
4. Внешняя вершина плавающей рамки не может быть выше вершины содержащего ее блока.Когда плавание происходит между двумя сужающимися полями, плавание позиционируется так, как если бы у него был пустой родитель анонимного блока, принимающий участие в потоке.Положение такого родителя определяется правилами в разделе, посвященном свертыванию полей.
5. Внешняя вершина плавающего блока не может быть выше внешней вершины любого блока или плавающего блока, созданного элементом ранее.в исходном документе.
6. Внешняя верхняя часть плавающего блока элемента не может быть выше верхней части любого строкового блока, содержащего блок, созданный элементом ранее в исходном документе.
7. Левый плавающий блок, у которого слева находится другой плавающий блок, может не иметь своего правого внешнего края справа от правого края содержащего его блока.(Слабовато: левый поплавок может не выступать на правом краю, если только он не находится как можно дальше от левого, насколько это возможно.) Аналогичное правило справедливо для плавающих справа элементов.
8. Плавающий бокс должен быть размещенкак можно выше.
9. Левый плавающий прямоугольник должен располагаться как можно дальше влево, а правый плавающий - как можно правее. Более высокое положениепредпочтительнее, чем слева / справа.

Это потому, что встроенные элементы не могут иметь свойства margin.<label> является встроенным элементом, и, плавая его, вы заставляете его действовать так, как если бы он был inline-block, позволяя вам добавить margin к нему.

Это странно.Попробуйте использовать display: inline-block; вместо float: left; и посмотрите, что произойдет.

Answer 2

Извините за мой предыдущий ответ, который, я надеюсь, был удален.

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

Answer 3

A обучение , сделанное консорциумом W3C, может вам помочь.

И спецификация со всей теорией, связанной с этой областью: Модель визуального форматирования