Overflow:hidden Parent を超えてフローティング子の可視性を維持するにはどうすればよいですか?

Overflow:Hidden Parent を超えた浮動子の可視性の維持

CSS では、overflow:hidden プロパティを親コンテナに適用して、浮いている子供たちに対応するために垂直方向に拡張します。ただし、このプロパティは、margin:auto と組み合わせて使用​​すると興味深い動作も示します。

overflow:hidden と margin:auto を持つ親コンテナがフローティング要素と兄弟関係にある場合、その要素に隣接して表示されます。 。これは、兄弟が左にフローティングされている場合、親コンテナが右にプッシュされ、フローティング要素の間の中央に配置されることを意味します。

この動作は特定のシナリオでは便利ですが、次のような場合もあります。子要素をマスクせずにこのレイアウトを維持したいと考えています。 overflow:visible はレイアウト保持効果を無効にし、子要素が親コンテナによってカバーされるため、これは困難になる可能性があります。

clearfix テクニックを使用した解決策:

この問題に対処するには、overflow:hidden に頼らずに「レイアウトの保存」を実現する、clearfix テクニックを利用できます。その方法は次のとおりです:

1. 次の CSS スタイルで clearfix クラスを作成します:

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

2. clearfix クラスを親コンテナに追加し、 overflow:hidden property.

clearfix クラスを適用すると、子要素がマスクされていないことを確認しながら、フローティング要素の相対的な位置を含む目的のレイアウトを維持できます。この手法は、親コンテナの外側にある要素の視覚的な階層とアクセシビリティを保持する必要がある場合に、overflow:hidden に代わる適切な方法として機能します。

以上がOverflow:hidden Parent を超えてフローティング子の可視性を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。