CSSを使用してフロートをクリアする方法

この記事では、CSS を使用してフロートをクリアする方法を主に紹介します。必要な友達に参考にしてください。フロートをクリアするのはさらに難しいですが、ここでは IE Chrome Firefox Opera のテストに合格しました。フロートをクリアすることは、すべての Web フロントエンド デザイナーが習得する必要がある機能です。 CSSクリアフロート事典、全部で8つのメソッド。

フローティングを使用すると、現在のラベルが上に浮き上がり、前後のラベルの位置、親ラベル、幅高さ属性にも影響します。さらに、同じコードでもブラウザによって表示が異なる場合があり、フロートのクリアがより困難になります。 float によって引き起こされる問題を解決する方法はいくつかありますが、ブラウザの互換性に問題があるものもあります。

以下は float をクリアする 8 つの方法をまとめたものです (テストは合格しました。つまり、Chrome Firefox Opera です。次の 3 つの方法は理解のためのものです):

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 を使用して float をクリアします。これにより、親 p が自動的に取得できるようになります。高さ
長所: シンプル、コードが少ない、ブラウザのサポートが優れている、奇妙な問題が発生しにくい
短所: ページに多くのフローティング レイアウトがある場合、多くの初心者は原理を理解していません。人々の気分を悪くします

推奨事項: 推奨されませんが、このメソッドは過去に主に 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 ブラウザーのみサポート: 後。原理は方法 2 に似ています。ズーム (属性を使用して変換された IE) は、ie6 および ie7 のフローティング問題を解決できます。 利点: ブラウザーのサポートが良好で、奇妙な問題が発生しにくい (現在: などの大規模な Web サイトで使用されています)。 (Tencent、NetEase、Sina など)
欠点 : コードが多く、多くの初心者は原理を理解していません。主流のブラウザでサポートするには、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 を使用する場合、ブラウザーはフローティング領域の高さを自動的にチェックします
利点:シンプルでコードが少なく、ブラウザのサポートが優れています
欠点: サイズを超えると非表示になるため、位置とともに使用できません。
推奨: ポジションを使用したことがない、または 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属性をテーブルに変える
長所: 利点なし
短所: 新しい未知の問題が発生する。
推奨事項: 使用は推奨されません。理解するためだけに使用してください。

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>

原則: IE のフローティング問題を解決するために、親 p がzoom:1 を定義します。末尾に br タグ clear:both を追加します
推奨事項: 推奨されません。理解。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

css 背景:透明の説明

CSSマウス風カーソルの説明

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