Html 为什么百分比利润率会导致新的生产线？ A. B C

在上面的例子中，字母“c”将位于新行，但如果我将“marginleft”设置为px单位，“c”将与“a”和“b”位于同一行。为什么会发生这种情况？

不幸的是，CSS2.1规范似乎没有明确的答案。事实上，我想说这完全在未定义行为的范围内

以下是我能找到的相关要点：

• 没有指定宽度的浮动将被删除。对于只包含内联内容的浮点，需要使浮点的宽度刚好足以将其内容放在一行上（尽管有明确的换行符），而不需要更多

• 计算百分比利润
  请注意，它说：
  如果包含块的宽度取决于此元素，则结果布局在CSS 2.1中未定义
  。。。但就我所见，所有浏览器的行为都是一致的
  话虽如此，该语句适用的原因是因为内联元素的边距在浮点的内容边界内，所以可以说浮点的宽度（内联元素的包含块）取决于该元素的宽度（具有边距的元素）

根据以上几点，我可以推断：

• 当边距指定为百分比时，计算浮动宽度时不考虑边距，因为在确定浮动宽度之前无法计算边距
  然后根据所使用的浮动宽度计算边距，字母“c”由于被“a”上的边距向前推而换行。浮动的宽度不会改变
  同样，这些行为都没有被指定，所以从技术上讲，它并不违反规范。然而，这似乎是合理的

• 将边距指定为像素值时，首先计算边距。然后，在计算浮点宽度时，将考虑该边距（请记住，水平边距与正常情况一样适用于内联元素）。根据“收缩到拟合”算法，这是首选宽度：宽度刚好足以在一行中包含所有内联元素
  与百分比边距不同，这是非常明确的，因为实现应该不存在计算边距绝对值的问题

我很难在任何浏览器中将其称为bug，特别是因为它们的行为都是一致的

---

最后，当然，您可以完全避免这种未定义的行为，只要在可能的情况下为浮动指定显式宽度即可。但是，这确实有助于理解您为什么应该这样做。

因为您的

div

是浮动的，并且它的

宽度

是

自动的（隐式），所以适用于：

如果“宽度”计算为“自动”，则使用的值为“收缩以适应”宽度

“收缩以适应”宽度基本上是指，让元素的宽度与其内容要求的宽度相同

现在没有了
空白
，这就没有问题了：所有
a
元素都是内联元素，每个元素都包含一个特定的字符–很容易确定它们各自的宽度，并将它们相加

但是现在你想要一个百分比的
左边的
，这里的情况变得复杂了——如果我们看一下，它说：

百分比：指包含块的宽度

现在，这给我们留下了一点麻烦，因为包含块的宽度（由浮动的
div
元素建立）是根据其内容计算的–但是现在这个
左边距将改变该内容的总宽度，但其本身取决于包含块的
宽度，它本身就影响着

这是两个相互依赖的测量的经典问题…因此基本上是无法解决的

说,

百分比是根据生成的框的包含块的宽度计算的。[…]

如果包含块的宽度取决于此元素，则结果布局在CSS 2.1中未定义


编辑：基本上与BoltClock在回答中所说的一样，只是花了我一点时间…
链接的左边距为10%，是多少的10%？父元素是向左浮动的，这意味着它没有自己的宽度，相反，它的扩展与其内容一样多。如果您尝试模拟浏览器计算结果框的方式，您会发现自己陷入了困境：


让内容（以及容器）的宽度为30px
将30px=3px左边距的10%添加到链接
容器的最终宽度为30+3=33px

这将创建一个循环，其中边距随着外部宽度的增加而增加，而外部宽度随着边距的增加而增加（33px=3.3px的10%表示容器宽度从33px更改为33.3px，以此类推）。对于这种计算，结果行为是未定义的（如所指出的）

浏览器似乎避免了循环，并保持30px的宽度。计算后引入的3px余量导致第三个链接流入第二行。浏览器再次使用30px的宽度来避免循环。
这取决于为10%计算的像素数与为10%计算的像素数之间的差异units@tlindell：看起来不像。如果你指定一个荒谬的像素值，比如500px，它的行为仍然与10px相同，尽管它明显大于10%的裕度。为什么我的答案与手头的问题无关？浮动元素应具有显式设置的宽度（除非它是替换的元素，如图像）。这确保了浮动的行为符合预期，并有助于避免iss
<div style = "float : left; background-color: #dd3fb8;">
    <a style = "margin-left : 10%;">a</a> 
    <a>b</a> 
    <a>c</a> 
</div>