Question

我有以下CSS：

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

button{
    margin-left:24px;
}

这个HTML：

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

我希望在标签的24个像素处找到按钮，但是直到我将按钮向左浮动时才会发生这种情况。我可以参考CSS规范的哪一部分来理解为什么会发生这种情况？

（拜托，对不起我的英文。）

Answer 1

请阅读W3C documentation for float：

以下是确切的规则   浮动的行为：


左浮箱的左外边缘可能不是   左边的左边   包含块。一个类似的规则   适用于右浮动元素。

如果当前框是左浮动的，则有任何   生成的左浮箱子   源中较早的元素   文件，然后为每个这样的早期   框，左边的外边缘   当前框必须在右侧   前面的右边缘   盒子，或它的顶部必须低于   早期框的底部。类似   规则适用于右浮箱。

左浮箱的右外边缘可能不是   任何一个左外缘的右边   它旁边的右浮动框。   类似的规则适用   右浮动元素。

浮动箱的外顶部可能不高于其顶部   包含块。当漂浮   发生在两个崩溃的边缘之间，   浮子的位置就好像它一样   一个空的匿名块   父母参与流程。该   定义了这样一个父母的位置   根据保证金部分的规定   塌陷。

浮箱的外顶部可能不高于外顶部   生成的任何块或浮动框   通过源中较早的元素   文档。

元素浮动框的外顶部可能不高于   包含a的任何行框的顶部   由早期的元素生成的框   源文件。

左浮动框，左侧有另一个左浮动框   可能没有正确的外缘   它包含块的权利   右边缘。（松散地：左浮动可能   不要伸出右边缘，   除非它已经到了远方   尽可能地离开。）一个类似的规则   适用于右浮动元素。

浮动箱必须尽可能高。

左浮箱必须尽可能放在左边，a   右侧浮动框向右侧   尽可能。更高的位置是   优先于一个更进一步   左/右。

这是因为内联元素不能具有margin属性。 <label>是一个内联元素，通过浮动它，您可以将其设置为inline-block，从而允许您向其添加margin。

很奇怪。尝试使用display: inline-block;代替float: left;，看看会发生什么。

Answer 2

W3C联盟制作的training可以帮助您。

该字段涉及所有理论的规范：Visual formatting model

Answer 3

对不起我以前的答案，我希望删除。

利润很棘手。在这种情况下，边距不计入浮点数：它们是从浮点数不存在时元素开始的位置计算的。可能您可以向浮点数应用保证金权限，或者如果您知道浮动的宽度将该加上其保证金加到您想要分隔它们的值。

浮动和水平边距

3 个答案: