html_CSS/HTML のフロートをクリアする 6 つの方法の例

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

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

インラインブロックのため属性、改行は解析される (ギャップがある) ので、解決策は float:left/right を使用することです

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

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

コードをコピー コードは次のとおりです。

div1

div2

span1n
span2phpcn




次のコードでは、box1 のみが浮動しているため、box1 と box2 が重なっています。両方がフロートの場合、それらは重なりません

コードをコピー コードは次のとおりです。

清浮動の方法：
1.给父级也加浮動（这种情况当父级margin:0 auto;時不居中）

复制代码 代码如下:

div>

2.给父级加display:inline-block;(同方法1，不居中) IE6,7居中のみ)

复制代代码如下:

3.在浮動元素下加

.clear{ height:0px;font-size:0;clear:both;} ただし、ie6 下、块元素有最小高さ、当即高さ

复制代 代码如下:

.clear{ height: 0px;font-size:0;clear:both;}
*/

phpcnltphpc n/html>

4.

コードをコピー コードは次のとおりです。

.clear{ height:0px;font-size:0;clear:both;}
4. 浮動要素 "all"/> の下に
*/

phpcnlt phpcn/div>
php cnltphpcnbr clear="all"/>

5. フローティング要素の親に {zoom :1;} を追加します。
:after{content:""; display:block;clear:both;}

コードをコピー コードは次のとおりです。

.clear{ height:0px;font -size:0;clear:both;}
4. 浮動要素の下に


を追加します。 5. 浮動要素の親に Level と {zoom:1; を加えます。 }
:after{content:""; display:block;clear:both;}

**IE6 および 7 では、フローティング要素の親に幅がある場合は必要ありません。 float

haslayout は、要素のコンテンツのサイズまたは親の親のサイズに基づいて要素の幅と高さを再計算します

display: inline-block
height: (任意の値)自動を除く)
フロート: (左または右)
幅: (自動を除く任意の値)
ズーム: (通常を除く任意の値)
*/

cngtphpcn

>
6. overflow:auto;

コードをコピー コードは次のとおりです。 :

div>