Html 了解带溢出的内联块元素的换行行为：隐藏

我希望两个

内联块

元素保持在同一行上，而不管它们的

宽度

或

边距

快速解决方案是将

空白：nowrap

应用于容器。Flex和float也是可行的替代方案

我只想用

空白：normal

找出一种特殊的包装行为

情况如下：

块级容器中有两个

内联块
元素

容器的宽度固定为500px

每个子对象的宽度固定为200px

容器设置为

溢出：隐藏

无论是否有

空白：nowrap

，框A都不会换行。其

宽度

或

左边距

的大小无关紧要；框A将消失在

溢出：隐藏的空白处

这是一个方框A，左边有
空白：400px
（容器有
溢出：隐藏；空白：正常
）：


注意上图中框B是如何包装的。它没有消失在
溢出：隐藏的
中

这是方框B，左边有
边距：250px
（从上面看容器没有变化；方框A重置）：


这是方框B，左边有
空白：400px
：


与方框A不同，方框B拒绝停留在第一行，只是隐藏起来

因此，规则似乎是：

使用
空白：正常
，只有行上的第一个元素将尊重
溢出：隐藏
。后续元素将换行，但在后续行上遵循
溢出：隐藏

用第三个要素检验这一理论似乎可以证明它是正确的：

这是带有
左边距：350px的方框B和带有
左边距：350px的新方框C：


因此，一个元素似乎不能强制另一个元素遵守它们的公共父元素上的
溢出：hidden

有人确切地知道发生了什么，和/或在规范中定义了这种行为吗

这是溢出、换行、内联块的问题，还是多种因素的组合

我在这里查过了，但没有发现任何东西：

从我的回答到：

通常，内联液位箱尽可能避免容器溢出。[……]

容器上的
溢出
值不影响其内容是否溢出或何时溢出；它只会在发生溢出时更改它及其内容的呈现方式

从以下方面：

通常，块框的内容仅限于框的内容边缘。在某些情况下，框可能溢出，这意味着其内容部分或全部位于框外，例如：


线不能断开，导致线框比块框宽

这就是为什么在
空白：normal
中，换行机会用空白表示，内联级别框将在任何机会出现时自动换行。这包括内联块。内联级别框只有在由于任何原因无法包装时才会溢出其容器。否则它们会被包裹起来

由于内联块与块容器盒具有相同的刚性物理结构，因此当内联块是给定线盒上唯一的内联层盒时，它不可能“拆分”或包裹。这就是为什么当长方体由于任何原因（包括被水平边距偏移）无法适应其行长方体的边界时，会发生溢出（即使当前行不是第一行）

奇怪的是，无中断空间相对于内联块的行为是不正确的。没有人知道原因。
确实显示了您所追求的情况：包装器有
空白：nowrap
，而方框A有
左边距：200px
（或更高）。框B被很好地推入了
溢出：隐藏的
，没有包装？仅供参考，这是我读过的最好的CSS资源之一，很好地解释了内联块元素的行为。谢谢@Kenney。是的，解决办法很简单。理解行为有点棘手；-）@DominicEU，谢谢你的链接参考。如果其中有任何内容可以回答该问题，请发布一个答案。在这种情况下，答案不相关，但有时
溢出
会影响其内容是否溢出，因为与
可见
不同的值会建立块格式上下文。当
height
为
auto
时，这样可以防止浮动内容垂直溢出。