イメージにオーバーフローが発生したのはなぜですか？

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の仕様では、これらのエッジ例1を見ていると思います。

例では、画像を左に浮かべた場合、予想どおりに水平スクロールバーが表示されます。

ただし、右側に浮動し、左側のエッジでオーバーフロー状態になる要素は切り取られているように見えます。

CSS 2.1の仕様は次の行にこれに暗示：

「オーバーフロー」「が見える」に設定されている場合でも、コンテンツは、ネイティブのオペレーティング環境によって UAのドキュメントウィンドウにクリップすることができます。

参考：あなたがイメージに絶対位置を使用した場合https://www.w3.org/TR/CSS21/visufx.html#overflow

も同様の効果が行われます。

オフセットをleft: 0に設定するとスクロールバーがトリガされますが、代わりにright: 0を設定すると画像が強制的にクリップされます。

ブラウザがこのように動作する理由に最もよく答える人は、最新のブラウザで使用されているCSSレンダリングエンジンを実際に作成した人です。

あなたは興味深い点を挙げました。

Answer 2

実際には、overflow: hiddenはどこにも適用されていません。画像と含まれているp要素は両方ともoverflow: visibleです。あなたは、開発ツールでこれを確認することができます。

しかし、あなたが考慮からoverflow削除した画像にfloat: rightを適用することで。つまり、overflowプロパティは効果がありません。

コンテンツの流れについて考えてみましょう。

左から右の言語モードでは、コンテンツが右にオーバーフローします。それは左にあふれません。

したがって、が技術的にオーバーフローしていないため、overflowプロパティは左に適用されません。スペックから

：

11.1.1 Overflow: the overflow property

このプロパティは、要素のボックスをオーバーフローしたときにブロックコンテナ要素 の内容がクリップされているかどうかを指定します。

また、LTR読み取り/書き込みモードでは、コンテンツは左側にオーバーフローしません。 RTLでは逆のことが当てはまります。それらを切り替えるにはCSS direction propertyを使用してください。

@MarcAudet's answerで指摘されているように、スクロールバーはfloat: leftで動作します。しかし、あなたのコードにスクロールバーはありませんfloat: rightです。ここで

は、いくつかの回避策です：

• Scroll horizontally starting from right to left with CSS overflow:scroll
• Can a scroll bar appear for content overflowing the browser window to the left?