CSS で Overflow:hidden が浮動子を非表示にしないようにするにはどうすればよいですか?

オーバーフローでの子の可視性の維持: 非表示のコンテナ

CSS では、overflow: hidden プロパティによりコンテナ内のオーバーフロー コンテンツが非表示になります。ただし、浮いている子の親に適用すると、興味深い効果が発生します。コンテナは自動的に浮動兄弟に隣接して位置合わせされ、浮動要素の親が並列して表示されるレイアウトを作成します。

問題点:

課題は維持にあります。子を隠すことなくこのレイアウト。コンテナーのオーバーフローを表示することで、コンテナーはフローティング要素のフローを無視し、それらの上に表示されます。

解決策:

これを克服するには、「」を利用します。クリアフィックス」というテクニック。 「clearfix」クラスを親に追加し、overflow: hidden を削除することで、次の CSS ルールは目的のレイアウトを維持します。

<code class="css">.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; /* IE < 8 */
}</code>

このアプローチは、レイアウトを維持しながら浮動要素を効果的に「クリア」し、親を許可します。コンテナは、その子をマスクせずにコンテナ自身をコンテナに隣接して配置します。

以上がCSS で Overflow:hidden が浮動子を非表示にしないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。