高さが異なるフローティング要素の重なりを防ぐにはどうすればよいですか?

高さが異なるフローティング要素: 兄弟の移動を回避する

フローティング要素は、コンテンツを水平方向に整列させるための便利な方法を提供します。ただし、これらの要素の高さが異なる場合、予期しないレイアウトの問題が発生する可能性があります。この場合、背の高い要素が後続の兄弟要素の適切な配置を妨げる可能性があります。

この問題に対処するために、CSS はいくつかの手法を提供しています。そのようなアプローチの 1 つは、nth-of-type() セレクターを利用して、シーケンス内の位置に基づいて特定の要素を識別します。この例では、:nth-of-type(3n 1) ルールを利用して、浮動要素の 3 セットごとの最初の要素に特定のスタイルを適用できます。

この CSS プロパティを追加することで、次のように定義します。浮動要素の 3 つごとに前の浮動要素がクリアされ、2 行目が最初の行の下に揃うようにする必要があります。

figure:nth-of-type(3n+1) {
    clear:left;
}

この手法は、指定された要素の浮動動作を効果的にリセットします。新しい行を開始できるようになり、重複の問題が解決されます。

これを実際に説明するには、更新された JSFiddle の例を参照してください: [](https://jsfiddle.net/KatieK/5Upbt/)。

以上が高さが異なるフローティング要素の重なりを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。