html_html/css_WEB-ITnose でフロートをクリアする 6 つの方法

詳しくは、

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

1. ブロック要素を 1 行で表示します
2. インラインサポートの幅を設定します。
3 . 改行は解析されます
4. 設定されていない場合、幅はコンテンツによって拡張されます
5. ブロックタグは IE6 および 7 でサポートされます

改行時に inline-block 属性が解析されるため (ギャップ)、解決策は float:left/right を使用することです

float を使用するときに発生する状況:

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

2. インライン要素を幅と高さに対応させます
3.幅と高さが設定されていない場合、幅はコンテンツによってサポートされます
4. 改行は解析されません (そのため、インライン要素を使用する場合は、float を使用してギャップをクリアできます)
5. 要素に float を追加すると、改行が解析されなくなります。ドキュメントフローが親または別の境界に達するまで指定された方向に移動します フローティング要素が停止します (ドキュメントフローとは、ドキュメント内の表示可能なオブジェクトが配置されたときに占める位置です)

クリア方法フロート: 1. 親にフロートを追加します
(この場合、親のマージン: 0 auto; 中央に配置されません)

2. 親に display:inline-block を追加します (メソッド 1 と同じです。 IE6 と 7 のみが中央に配置されます)

3. フローティング要素 div class="clear"> にクラスと {zoom: 1;} を追加します。 : "" "; 異なる: ブロック; クリア: 両方;} 6. ://www.jb51.net/article/43261.htm

HTML/CSS コンテンツの詳細については、
をクリックしてください。