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

Question

我有following fiddle，请注意，如果您将输出的宽度设置得更小，则图像会被遮盖，并且不会显示滚动条 - 完美。

如果我attempt the same effect on the right，我会得到一个水平滚动条 - 不完美。

我在文章中了解overflow: hidden，但这会破坏我的目标。我也试过relative positioning，但没有包装文本（虽然不是说文本换行不可能）。

任何人都知道我能得到我想要的东西吗？

<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，因此从左侧开始，任何溢出的内容都将从右侧流出。在负边距的情况下，将元素拉出左边缘只是完全剪切元素的那一部分，而将其从右边缘拉出实际上会扩展其容器的有效内容区域，从而导致溢出。

为了得到你想要的东西，apply hidden overflow to the body instead of the article所以内容溢出文章而不会溢出身体，导致创建水平滚动条。请务必使用overflow-x代替overflow，这样您就不会丢失内容的垂直滚动条：

body {
    overflow-x: hidden;
}

如果您需要完全阻止滚动而不是隐藏滚动条，则需要将溢出应用于html, body，以及摆脱默认的主体边距，如图所示{{3} }：

html, body {
    overflow-x: hidden;
}

body {
    margin: 0;
}