Question

我想知道为什么overflow: hidden会自动应用于此代码中。我知道这与float有关，但我仍然不明白为什么。

img {
  float: right;
  margin: 0 0 10px 10px;
}

<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p>
  <img src="http://www.w3schools.com/css/w3css.gif" alt="W3Schools.com" width="2000" height="140">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
  vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
  imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

Answer 1

我认为您正在查看CSS规范中的其中一个边缘情况。

在您的示例中，如果您将图像浮动到左侧，您会看到一个水平滚动条，如预期的那样。

但是，看起来会向右浮动并导致左边缘溢出的元素被剪裁。

CSS 2.1规范在以下内容中提到了这一点：

即使＆＃39;溢出＆＃39;设置为“可见”，内容可能会被裁剪为a 本机操作环境下的UA文档窗口。

参考：https://www.w3.org/TR/CSS21/visufx.html#overflow

如果要在图像上使用绝对定位，也会产生相同的效果。

将偏移量设置为left: 0会触发滚动条，而设置right: 0则会强制剪切图像。

能够最好地回答浏览器工作方式的人是真正编写现代浏览器中使用的CSS渲染引擎的人。

无论如何，你提出了一个有趣的观点。

Answer 2

实际上，overflow: hidden并未在任何地方应用。图片和包含p元素均为overflow: visible。您可以在开发工具中验证这一点：

但是，通过将float: right应用于您已将overflow移除的图像。换句话说，overflow属性没有效果。

考虑内容的流动。

在从左到右的语言模式中，内容溢出到右侧。它不会向左溢出。

因此，overflow属性不适用于左侧，因为技术上没有溢出。

来自规范：

11.1.1 Overflow: the overflow property

此属性指定块容器元素的内容   当它溢出元素框时被剪裁。

同样，在LTR读/写模式下，内容不会向左溢出。在RTL中则相反。使用CSS direction property在它们之间切换。

正如@MarcAudet's answer中指出的那样，滚动条适用于float: left。但是代码中没有float: right的滚动条。

以下是一些解决方法：

为什么图像溢出：隐藏？

2 个答案: