负左边距工作正常，负边距右创建滚动条

Question

我有以下小提琴，请注意，如果您使输出的宽度变小，图像将被覆盖并且没有滚动条出现 - 完美。

如果我在右侧尝试相同的效果，我会得到一个水平滚动条 - 不完美。

我知道这篇文章overflow: hidden，但这会破坏我要做的外观。我也尝试了相对定位，但这并没有换行文本（尽管并不是说不可能使文本换行）。

有人知道我怎样才能得到我想要的吗？

<article>
    <h1>Lorem ipsum dolor</h1>
    <img src="http://lorempixel.com/500/300" class="right" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet diam in neque venenatis semper et et dui. Nam risus ante, condimentum id neque ac, faucibus molestie purus. Pellentesque viverra ultrices lacus, sed vulputate diam lobortis fermentum.</p>
    <p>Sed tincidunt tortor in lectus imperdiet bibendum. Nullam pellentesque commodo lacus, eget consequat erat convallis ut. Donec scelerisque urna urna, at aliquam nulla sagittis eu. Proin sit amet sagittis est. Phasellus tempor orci sem, id facilisis nibh tincidunt non.</p>
    <h2>Sit amet</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet diam in neque venenatis semper et et dui. Nam risus ante, condimentum id neque ac, faucibus molestie purus. Pellentesque viverra ultrices lacus, sed vulputate diam lobortis fermentum.</p>    
    <p>Sed tincidunt tortor in lectus imperdiet bibendum. Nullam pellentesque commodo lacus, eget consequat erat convallis ut. Donec scelerisque urna urna, at aliquam nulla sagittis eu. Proin sit amet sagittis est. Phasellus tempor orci sem, id facilisis nibh tincidunt non.</p>
</article>

.CSS

article {
    margin: 0 auto;
    max-width: 500px;
}
img.left {
    margin: 0 20px 20px -300px;
    float: left;
}
img.right {
    margin: 0 -300px 20px 20px;
    float: right;
}

Answer 1

您观察到的行为的原因是，水平溢出仅从内容开始的相反边缘发生。在大多数语言中，内容的方向是LTR，因此从左侧开始，任何溢出的内容都将从右侧流出。在负边距的情况下，从左边缘拉出元素只是完全剪切元素的该部分，而将其从右边缘拉出实际上会扩展其容器的有效内容区域，从而导致溢出。

若要获得所需的内容，请将隐藏溢出应用于正文而不是文章，以便内容溢出文章而不会溢出正文，从而导致创建水平滚动条。请务必使用 overflow-x 而不是 overflow，以免丢失内容的垂直滚动条：

body {
    overflow-x: hidden;
}

如果您需要完全防止滚动而不是仅隐藏滚动条，则需要将溢出应用于两个html, body，并摆脱默认的正文边距，如下所示：

html, body {
    overflow-x: hidden;
}
body {
    margin: 0;
}