ホームページ >ウェブフロントエンド >CSSチュートリアル >float をクリアするためのいくつかの CSS メソッドを共有する

float をクリアするためのいくつかの CSS メソッドを共有する

小云云
小云云オリジナル
2018-02-28 10:58:491349ブラウズ

この記事では主に CSS でフロートをクリアするいくつかの方法を紹介します。お役に立てれば幸いです。

1. 親 p は高さを定義します

<style type="text/css"> .p1{background:#000080;border:1px solid red;height:200px;}
    .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 が高さを自動的に取得できないという問題を解決します (高さが固定されたレイアウトにのみ推奨)

2.最後のタグをクリア: 両方

<style type="text/css"> .p1{background:#000080;border:1px solid red}
    .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,利用css提高的clear:both清除浮动,让父级p自动获取高度(以前使用的较多)

3. 親 p は疑似クラスを定義します: after とzoom

<style type="text/css"> .p1{background:#000080;border:1px solid red;}
    .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>

IE8 以降および非 IE ブラウザーでのみサポート: after、zoom (つまり独自の属性) でフローティング問題を解決できます。 IE6 と IE7 の

4、親 p の定義のオーバーフロー: hidden

<style type="text/css"> .p1{background:#000080;border:1px solid red;width:98%;overflow:hidden}
    .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>
必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度

5。親の定義: overflow:auto

<style type="text/css"> .p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}
    .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>
必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度

6. 親 p も一緒に浮動します

<style type="text/css"> .p1{background:#000080;border:1px solid red;width:98%;margin-bottom:10px;float:left}
    .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>

float が生成されます

7. 親 p は、display:table を定義します

<style type="text/css"> .p1{background:#000080;border:1px solid red;width:98%;display:table;margin-bottom: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 の属性をテーブルに変換します

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

<style type="text/css"> .p1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
    .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 はズームを定義します: 1. IE のフローティングの問題を解決するには、最後に br タグ clear を追加します: Both

関連する推奨事項:

CSS でフロートをクリアする方法について

メソッドCSSでfloatをクリアする方法

floatをクリアする方法とメリットとデメリットは何ですか

以上がfloat をクリアするためのいくつかの CSS メソッドを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。