浮动和水平边距答案

【问题标题】：Floats and horizontal margins浮动和水平边距
【发布时间】：2017-11-19 03:30:07
【问题描述】：

我有以下 CSS：

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

button{
    margin-left:24px;
}

对于这个 HTML：

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

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

（请原谅我的英语。）

【问题讨论】：

标签： css css-float

【解决方案1】：

只需阅读W3C documentation for float：

以下是管理的精确规则浮动的行为：

左浮动框的左外边缘可能不在其左边缘的左侧包含块。类似的规则适用于右浮动元素。

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

左浮动框的右外边缘可能不在任何左外边缘的右侧它旁边的右浮动框。类似的规则适用于右浮动元素。

浮动框的外部顶部不得高于其顶部包含块。当浮发生在两个折叠边距之间，浮子的位置好像它有否则为空的匿名块参与流程的家长。这定义了这样一个父级的位置根据保证金部分的规则崩溃。

浮动框的外顶不得高于外顶生成的任何块或浮动框通过源中较早的元素文件。

元素浮动框的外部顶部不能高于任何包含 a 的 line-box 的顶部由前面的元素生成的框源文件。

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

浮动框必须放置在尽可能高的位置。

一个左浮动的盒子必须尽可能地放在左边，一个最右边的浮动框 更高的位置是优先于进一步左/右。

这是因为内联元素不能有margin 属性。 <label> 是一个内联元素，通过浮动它，你可以让它表现得好像它是一个 inline-block，允许你添加一个 margin 到它。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

“计数”是什么意思？
接下来我要说的是，如果浮动不存在，它们是从元素开始的位置计算的。因此按钮的边距与浮动开始的位置相同，并且由于浮动大于它，所以在浮动之后没有任何保留。浮动的效果是将按钮推到右侧，但如果浮动不存在，按钮的边距会准确地留在原处。就好像不存在一样。

【解决方案3】：

W3C 联盟制作的training 可能会对您有所帮助。

以及该领域涉及的所有理论的规范：Visual formatting model

【讨论】：