<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”处于同一行.为什么会发生这种情况？
解决方法
以下是我可以找到的相关内容：
>没有指定宽度的浮动将为shrink to fit their contents.对于只有内联内容的浮点数,浮点数需要做得足够宽,才能将其内容放在一行(尽管有明确的换行符),而不会再有.
>利润百分比计算based on the width of the containing block.
请注意：
If the containing block’s width depends on this element,then the resulting layout is undefined in CSS 2.1.
…但据我所见,所有浏览器的行为是一致的.
话虽如此,这个声明的原因在于,因为内联元素的边距落在浮点的内容范围之内,所以可以说float(包含内联元素的块)的宽度取决于这个元素(具有边距的元素).
以下是我可以推导出来的：
>当保证金指定为百分比时,计算浮动货币的宽度,而不考虑保证金,因为在确定浮动货币的宽度之前无法计算保证金.
然后根据浮动的使用宽度计算边距,并且由于被“a”上的边距向前推,结果将字母“c”包裹到新行.浮子的宽度不变.
同样,这个行为根本没有指定,所以在技术上它并没有违反规范.但是,这似乎是明智的.
>当边距指定为像素值时,首先计算边距.然后考虑到这个边距来计算浮点的宽度(请记住,水平边距确实适用于正常的内联元素).根据收缩到拟合算法,这是首选宽度：足够宽,以便在一行上包含所有内联元素.
与利润率百分比不同,这是非常明确的,因为实施应该首先计算利润的计算绝对值没有任何麻烦.
在任何浏览器中,我都很难将此称为错误,特别是因为它们都表现一致.
最后,当然,您可以完全简单地通过在可能的情况下给予浮动显式宽度来避免这种未定义的行为.但是,它有助于了解为什么你应该这样做.
