CSS でフロートをクリアするための完全ガイド (要約)

1. 親divは疑似クラスafterとzoomを定義します

<スタイル タイプ="text/css"> 
   .div1{背景:#000080;境界線:1px 赤一色;}
   .div2{背景:#800080;境界線:1px 赤一色;高さ:100px;上余白:10px}
   
   .left{float:left;幅:20%;高さ:200px;背景:#DDD}
   .right{float:right;幅:30%;高さ:80px;背景:#DDD}
   
   /*フローティングコードをクリア*/
   .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
   .clearfloat{ズーム:1}
   </スタイル> 
<div class="div1 クリアフロート"> 
<div class="left">左</div> 
<div class="right">右</div> 
</div>
<div class="div2">
   div2
   </div>

原則: :after は IE8 以上と IE 以外のブラウザでのみサポートされます。原則は方法 2 と似ています。Zoom (IE 変換には属性があります) は、IE6 と IE7 のフローティング問題を解決できます。

利点: ブラウザのサポートが良好で、奇妙な問題が発生する可能性が低い (現在: Tencent、NetEase、Sina などの大規模な Web サイトで使用されています)

デメリット: コードが多すぎるため、初心者の多くは原理を理解していません。主流のブラウザでサポートされるようにするには、2 つのコードを一緒に使用する必要があります。

推奨事項: CSS コードを削減するために共通クラスを定義することをお勧めします。

評価: ★★★★☆

2. 最後に空のdivタグclear:bothを追加します。

<スタイル タイプ="text/css"> 
   .div1{背景:#000080;境界線:1px 赤一色}
   .div2{背景:#800080;境界線:1px 赤一色;高さ:100px;上余白:10px}
   
   .left{float:left;幅:20%;高さ:200px;背景:#DDD}
   .right{float:right;幅:30%;高さ:80px;背景:#DDD}
   
   /*フローティングコードをクリア*/
   .clearfloat{クリア:両方}
   </スタイル> 
<divクラス="div1"> 
<div class="left">左</div> 
<div class="right">右</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
   div2
   </div>

原則：空のdivを追加し、CSSのclear:bothメソッドを使用してフロートをクリアし、親divが自動的に高さを取得できるようにします。

利点: シンプル、コードが少ない、ブラウザのサポートが良好、奇妙な問題が発生する可能性が低い

デメリット: 多くの初心者は原理を理解していません。ページにフローティングレイアウトが多数ある場合、多くの空のdivが追加され、人々に不快感を与えます。

推奨事項: 推奨されませんが、この方法は以前はフロートをクリアする方法として使用されていました。

評価: ★★★☆☆

3. 親divが高さを定義する

<スタイル タイプ="text/css"> 
   .div1{background:#000080;border:1px solid red;/*ソリューションコード*/height:200px;}
   .div2{背景:#800080;境界線:1px 赤一色;高さ:100px;上余白:10px}
   
   .left{float:left;幅:20%;高さ:200px;背景:#DDD}
   .right{float:right;幅:30%;高さ:80px;背景:#DDD}
   </スタイル> 
<divクラス="div1"> 
<div class="left">左</div> 
<div class="right">右</div> 
</div>
<div class="div2">
   div2
   </div>

原則: 親divの高さを手動で定義すると、親divが自動的に高さを取得できない問題が解決されます。

利点: シンプル、コードが少ない、習得が簡単

デメリット: 高さが固定されたレイアウトにのみ適しています。正確な高さを指定する必要があります。高さが親 div と異なる場合、問題が発生します。

推奨事項: 推奨されません。高さが固定されたレイアウトにのみ推奨されます。

評価: ★★☆☆☆

4. 親divはoverflow:hiddenを定義します

<スタイル タイプ="text/css"> 
   .div1{background:#000080;border:1px solid red;/*ソリューションコード*/width:98%;overflow:hidden}
   .div2{背景:#800080;境界線:1px 赤一色;高さ:100px;上余白:10px;幅:98%}
   
   .left{float:left;幅:20%;高さ:200px;背景:#DDD}
   .right{float:right;幅:30%;高さ:80px;背景:#DDD}
   </スタイル> 
<divクラス="div1"> 
<div class="left">左</div> 
<div class="right">右</div>
</div>
<div class="div2">
   div2
   </div>

原則: width または zoom:1 を定義する必要があり、height を定義することはできません。overflow:hidden を使用すると、ブラウザはフローティング領域の高さを自動的にチェックします。

利点: シンプル、コードが少ない、ブラウザのサポートが良好

デメリット: 制限を超えるサイズは非表示になるため、位置とともに使用できません。

推奨事項: これは、position を使用したことがないか、overflow:hidden を深く理解している場合にのみ推奨されます。

評価: ★★★☆☆

5. 親divはoverflow:autoを定義する

<スタイル タイプ="text/css"> 
   .div1{background:#000080;border:1px solid red;/*ソリューションコード*/width:98%;overflow:auto}
   .div2{背景:#800080;境界線:1px 赤一色;高さ:100px;上余白:10px;幅:98%}
   
   .left{float:left;幅:20%;高さ:200px;背景:#DDD}
   .right{float:right;幅:30%;高さ:80px;背景:#DDD}
   </スタイル> 
<divクラス="div1"> 
<div class="left">左</div> 
<div class="right">右</div>
</div>
<div class="div2">
   div2
   </div>

原則: width または zoom:1 を定義する必要があり、height を定義することはできません。overflow:auto を使用すると、ブラウザはフローティング領域の高さを自動的にチェックします。

利点: シンプル、コードが少ない、ブラウザのサポートが良好

欠点: 内部の幅と高さが親 div を超えると、スクロールバーが表示されます。

推奨事項: 推奨されません。スクロールバーを表示する必要がある場合、またはコードによってスクロールバーが表示されないようにする場合にのみ、この方法を使用してください。

評価: ★★☆☆☆

6. 親divも一緒にフロートする

<スタイル タイプ="text/css"> 
   .div1{background:#000080;border:1px solid red;/*ソリューションコード*/width:98%;margin-bottom:10px;float:left}
   .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*ソリューションコード*/clear:both}
   
   .left{float:left;幅:20%;高さ:200px;背景:#DDD}
   .right{float:right;幅:30%;高さ:80px;背景:#DDD}
   </スタイル> 
<divクラス="div1"> 
<div class="left">左</div> 
<div class="right">右</div>
</div>
<div class="div2">
   div2
   </div>

原則：すべてのコードは一緒に浮かび上がり、全体となる

利点: 利点なし

デメリット: 新たな浮上問題が生じます。

推奨事項: 推奨されませんが、理解のためだけに使用します。

評価: ★☆☆☆☆

7. 親divはdisplay:tableを定義する

<スタイル タイプ="text/css"> 
   .div1{background:#000080;border:1px solid red;/*ソリューションコード*/width:98%;display:table;margin-bottom:10px;}
   .div2{背景:#800080;境界線:1px 赤一色;高さ:100px;幅:98%;}
   
   .left{float:left;幅:20%;高さ:200px;背景:#DDD}
   .right{float:right;幅:30%;高さ:80px;背景:#DDD}
   </スタイル> 
<divクラス="div1"> 
<div class="left">左</div> 
<div class="right">右</div>
</div>
<div class="div2">
   div2
   </div>

原則: div属性をテーブルに変換する

利点: 利点なし

デメリット: 新たな未知の問題が発生する

推奨: 推奨されませんが、理解のためにのみ使用してください

評価: ★☆☆☆☆

8. 最後にbrタグclear:bothを追加する

<スタイル タイプ="text/css"> 
   .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
   .div2{背景:#800080;境界線:1px 赤一色;高さ:100px}
   
   .left{float:left;幅:20%;高さ:200px;背景:#DDD}
   .right{float:right;幅:30%;高さ:80px;背景:#DDD}
   
   .clearfloat{クリア:両方}
   </スタイル> 
<divクラス="div1"> 
<div class="left">左</div> 
<div class="right">右</div>
<br class="clearfloat" />
</div>
<div class="div2">
   div2
   </div>

原則: 親divはIEのフローティング問題を解決するためにzoom:1を定義し、最後にbrタグclear:bothを追加します。

推奨: 推奨されませんが、理解のためにのみ使用してください

評価: ★☆☆☆☆

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: mysql データ型変換の実装

>>: W3C チュートリアル (9): W3C XPath アクティビティ