浮标和水平的利润率

Question

我有以下的CSS：

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

button{ 
    margin-left:24px; 
} 

这个HTML：

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

，我希望该按钮是在标签的24个像素的距离发现，然而，直到我将按钮向左移动时，才发生这种情况。我可以参考的CSS规范的哪部分理解为什么会发生这种情况？

（请，对不起，我的英语。）

Answer 1

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

边距很棘手。在这种情况下，边距不计入浮点数：如果浮点数不在那里，则从元素开始的位置计算边距。可能的话，您可以将浮动限制权应用于浮动浮动，或者如果您知道浮动浮动宽度，请将其余量加上您想要将其分开的值。

Answer 2

由W3C联盟提出可以帮助你training。

，并与所有参与这一领域的理论规格：Visual formatting model

Answer 3

刚才看了W3C documentation for float：

这里有支配 花车行为的精确的规则：

1. 左浮动框的左外边缘可能不是其左边的 左边3210包含块。类似规则 适用于右浮动元素。
2. 如果当前框是左浮置，并且有由 元件较早源 文档中生成的任何 向左浮动框，然后对每个这样的较早 盒，无论是 当前框的左外边缘必须在 之前的右边 框的右边缘，或者其顶部必须低于前面框的底部 。类似的 规则适用于右浮动框。
3. 左浮动框的右外边缘可能与其右边任何 右浮动框的左外边缘的右边 不相同。 类似规则适用于 右浮动元素。
4. 浮动箱的外顶不得高于其包含块的顶部 。当浮动 发生在两个折叠边界之间时，浮动的位置好像它有 ，否则为空的匿名块 亲参与流动。这种父母的位置 根据保证金 折叠部分中的规则被定义为 。
5. 浮动框的外部顶部可能不会高于源 文档中之前的元素生成的任何块或浮动框的外部顶部 。
6. 元素浮动框的外部顶部可能不会高于 任何包含 框的任何线条框的顶部，此框由 之前的元素在源文档中生成。
7. 一个左浮动框左侧的另一个浮动框 可能没有右边的外边框到 它的包含块的右边的 右边缘。 （松散地：左边的浮动可能 不会在右边缘伸出， 除非它已经尽可能远离 左边）。类似规则 适用于右浮动元素。
8. 浮动箱子必须尽可能高。
9. 左浮箱必须尽可能地放在尽可能远的地方， 右浮箱尽可能地靠近右边 。较高的位置是 优先于一个进一步到 的左/右。

这是因为内联元素不能具有margin属性。 <label>是一个内联元素，通过将它浮动，您可以使它看起来像是一个inline-block，允许您为其添加margin。

这很奇怪。 尝试使用display: inline-block;而不是float: left;，看看会发生什么。