1

overflow:hidden がフロートをクリアする方法であることは理解していますが、その理由はわかりません。フロートの影響を受けた要素の外側に何かがあるため、overflow:hidden を使用すると思いますか? もしそうなら、何が隠されていますか？

たとえば、この場合、 #second に隠されているもので、 #first の横にあるものはありますか?

(関連する別の質問がありますが、これは異なります。これはより具体的です。私の質問は、「overflow:hidden」は何かを隠しますか?それは何ですか?)

例を次に示します: http://jsfiddle.net/NSCpD/

CSS:

#first{
    float:left;
    width:100px; height:100px;
    background:blue;
}

#second{
    width:300px; height:300px;
    overflow:hidden; /* això fa que no li afecti el float */
    background:red;
}

HTML:

<div id="first"> </div>
<div id="second"> </div>
4

2 に答える 2

1

その名前が示すように、要素をオーバーフローする (指定されたサイズを超える)overflow:hiddenコンテンツを非表示にします。この例では実際にはオーバーフローがないため、何も隠されていません。ただし、それ以外(および、それ自体など)を設定することの副作用は、ブロックの動作の変更です。通常のブロックは効果的にフロートをまったく考慮しませんが (テキスト コンテンツのみが考慮されます)、新しいブロック フォーマット コンテキストを確立するブロック (Adrift の回答を参照) は、ネストされたフロート、折りたたみ可能なマージンなどを含む、内部のすべてのコンテンツを分離します。 .overflowvisibledisplay: inline-blockfloat

この副作用は、フロートのコンテナーが崩壊するのを防ぐために使用される場合がありますが、フロートのクリアとは関係ありません。クリアリングと BFC は、折り畳み可能なマージン、ドキュメントの前にある他のフロートなどの場合、非常に異なる動作をします。

于 2013-08-16T10:02:35.430 に答える