CSS を使用してフロートをクリアする 7 つの方法の長所と短所-CSSチュートリアル-php.cn

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

高洛峰

リリース： 2017-03-21 14:28:52

オリジナル

2025 人が閲覧しました

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 サイトの他の関連記事を参照してください。