<div style = "float : left; background-color: #dd3fb8;">
<a style = "margin-left : 10%;">a</a>
<a>b</a>
<a>c</a>
</div>
在上面的示例中，字母“c”将在新行上，但如果我将“margin-left”设置为px单位，“c”将与“a”和“b”在同一行。为什么会发生这种情况？
不幸的是，CSS2.1 规范似乎对此没有明确的答案。事实上，我想说这完全属于未定义行为的范围。
以下是我能找到的相关要点：
没有指定宽度的浮动将缩小以适应其内容 http://www.w3.org/TR/CSS21/visudet.html#float-width。对于仅包含内联内容的浮动，浮动需要足够宽以将其内容放在单行上（尽管有明确的换行符），仅此而已。
-
计算利润百分比基于包含块的宽度 http://www.w3.org/TR/CSS21/box.html#margin-properties.
请注意，它说：
如果包含块的宽度取决于此元素，则生成的布局在 CSS 2.1 中未定义。
...但据我所知，所有浏览器的行为都是一致的。
话虽如此，这条语句适用的原因是因为内联元素的边距落在浮动的内容范围内，可以说浮动的宽度（内联元素的包含块）取决于 this元素（具有边距的元素）。
这就是我能做的deduce基于以上几点：
-
当边距指定为百分比时，计算浮动宽度时不考虑边距，因为无法计算边距until浮动的宽度已经确定。
然后根据浮动的使用宽度计算边距，并且字母“c”由于被“a”上的边距向前推而换行。浮动的宽度不会改变。
同样，这种行为根本没有被指定，因此从技术上讲，它并不违反规范。然而，这似乎是明智的。
-
当边距指定为像素值时，首先计算边距。然后，考虑此边距来计算浮动的宽度（请记住，水平边距通常适用于内联元素）。根据收缩到适合算法，这是首选宽度：宽度足以包含单行上的所有内联元素。
与百分比利润不同，这是非常明确的，因为实现首先计算计算利润的绝对值应该没有问题。
我很难将此称为任何浏览器中的错误，特别是因为它们的行为都是一致的。
最后，当然，您可以通过在可能的情况下为浮动提供明确的宽度来完全避免这种未定义的行为。它确实有助于理解why但是，您应该这样做。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
