CSS を使用してフロートをクリアする 7 つの方法の長所と短所

1、親pの定義高さ

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

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

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

欠点: 固定高さのレイアウトにのみ適しており、正確な高さを指定する必要があります。高さが親 p と異なる場合、問題が発生します

推奨事項: そうではありません。推奨、固定高レイアウトには

2 を使用し、最後に空の p タグを追加することのみが推奨されます clear:both

<style type="text/css"> 
.p1{background:#000080;border:1px solid red} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfloat{clear:both} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
<p class="clearfloat"></p> 
</p> 
<p class="p2"> 
p2 
</p>

原則: 空の p を追加し、CSS によって改良された clear:both を使用して、親 p を自動的に取得できるように、float をクリアします。 高レベルへ

利点: シンプル、コードが少なく、ブラウザーのサポートが優れており、奇妙な問題が発生しにくいです

欠点: 多くの初心者は原理を理解していません。ページが多すぎますフローティングレイアウト、空のPSが大量に追加されるため、人々は不快に感じます

推奨事項:推奨されませんが、この方法は主にFloatをクリアするために使用される方法です

3、親P定義疑似クラス:afterとzoom

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 
</style> 
<p class="p1 clearfloat"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

原則: IE8以降IE以外のブラウザでのみサポート:after、原則は方法2とやや似ており、zoom(IE転送には属性がある)で解決できます。 ie6 と ie7 のフローティング問題

長所: ブラウザのサポートが良好で、奇妙な問題が発生しにくい (現在: Tencent、NetEase、Sina などの大規模な Web サイトで使用されている)

短所: コードが多く、コードも多い初心者は原理を理解していません。主流のブラウザでサポートするには、2 行のコードを組み合わせて使用​​する必要があります。

推奨事項: CSS コードを減らすためにパブリック クラスを定義することをお勧めします。

4、親pの定義overflow:hidden

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

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

。

利点: シンプル、少ないコード、優れたブラウザサポート

欠点: 余分なサイズが非表示になるため、positionと一緒に使用することはできません。

推奨: ポジションを使用したことがない、または overflow:hidden を深く理解している友人にのみ推奨します。

5、親 p は overflow:auto

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

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

。利点: シンプル、コードが少なく、優れたブラウザサポート

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

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

6、親 p も一緒に浮遊します

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} 
.p2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

原則: すべてのコードは一緒に浮遊して全体になります

利点: 利点はありません

欠点: 新しい浮遊問題が発生します。

推奨事項: 使用は推奨されません。理解するためにのみ使用してください。

7、親p定義display:table

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.p2{background:#800080;border:1px solid red;height:100px;width:98%;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

原則: p属性をtable

長所: 利点なし

短所: 新しい未知の問題が発生します。

推奨事項: 使用は推奨されません。理解するためにのみ使用してください。

8、最後に br タグを追加します。clear:both

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} 
.p2{background:#800080;border:1px solid red;height:100px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
.clearfloat{clear:both} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
<br class="clearfloat" /> 
</p> 
<p class="p2"> 
p2 
</p>

以上がCSS を使用してフロートをクリアする 7 つの方法の長所と短所の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。