HTML のフロートをクリアするためのいくつかの方法

この記事では、HTML 要素のフローティングを解除する 6 つの方法について説明します。詳細は以下を参照してください。

display: inline-block: を使用するとどうなるか

1. ブロック要素を 1 行で表示します。

2. 幅と高さのインラインサポートを有効にする

3. 改行が解析されます

4. 設定されていない場合、幅は IE6 および 7 以降でサポートされます

inline-block 属性が解析されるため行が途切れる（隙間がある）ため、解決策は float: left/right を使用することです

float: 使用時に発生する状況

1. ブロック要素を 1 つに表示します。 line

3. 幅と高さが同じでない場合、幅はコンテンツによって拡張されます
4. インライン要素を使用する場合、ギャップを埋めるためにフロートを使用できます)
5. 要素にフロートを追加すると、親の境界に到達するか、別のフローティング要素が停止するまで、ドキュメント フローから離れて指定された方向に移動します (ドキュメント フローがその位置にあります)。配置時にドキュメント内の表示可能なオブジェクトによって異なります)

p1
p2
span1
span2

1. 親にフロートを追加します (この場合、親のマージンが 0 auto;)

フローティング要素の下

.clear{ height:0px;font-size:0;clear:both;} ただし、IE6 では、ブロック要素には最小の高さがあります。つまり、高さが 19px 未満の場合、デフォルトは 19px です。 解決策: font-size: 0; または overflow:hidden;

を浮動要素の親に追加します

:after{content:""; display:block;clear:both;}