CSS floatプロパティの詳細な説明

1. フローティングとは何ですか?

フローティングは、その名の通り、浮遊することを意味します。要素がドキュメントフローから分離され、親要素の上に浮かぶ現象を指します。

2. フローティングを生成するにはどうすればいいですか?

要素自体にfloat属性を追加する

浮動小数点値:

左	要素を左にフロートします。
右	要素を右にフロートします。
なし	デフォルト値。要素はフロートせず、テキスト内に表示される場所に表示されます。
継承する	float プロパティの値を親要素から継承することを指定します。

3.フローティングの機能は何ですか？

機能: HTML ドキュメントフローでは、行要素、ブロック要素、インラインブロック要素に分けられます。

行要素とインラインブロック要素は水平方向に配置されますが、ブロック要素はフローに沿って上から下に配置されます。ブロック要素を水平方向に配置したい場合は、float を使用します。

ブロックレベル要素にフロートを追加すると、次の図に示すように、垂直に配置されるはずの要素が水平に配置され始めます。

.box {境界線: 1px solid #666;高さ: 700px;幅: 700px;色: #fff;}
.box1 {float: 左; 幅: 100px; 高さ: 100px; 背景: #000;}
.box2 {float: left; 幅: 100px; 高さ: 100px; 背景: red; }
.box3 {幅: 200px; フロート: 左; 高さ: 200px; 背景: 黄色; }
.box4 {幅: 300px; フロート: 左; 高さ: 300px; 背景: 青; }
.box5 {float: 左; 幅: 300px; 高さ: 400px; 背景: 緑;}
<div class="box"> <div class="box1"> ボックス1 </div> <div class="box2"> ボックス2 </div> <div class="box3"> ボックス3 </div> <div class="box4"> ボックス4 </div> <div class="box5"> ボックス5 </div> </div>

4. 浮遊によって引き起こされる問題

要素がフロートされている場合、その要素はドキュメントフローから外れ、致命的な問題が発生します。つまり、親要素の高さが崩れてしまいます (上記の例を例に挙げます)。

.box {境界線: 1px 実線 #666; 幅: 800px;色: #fff;}
.box1 {float: 左; 幅: 100px; 高さ: 100px; 背景: #000;}
.box2 {float: left; 幅: 100px; 高さ: 100px; 背景: red; }
.box3 {幅: 200px; フロート: 左; 高さ: 200px; 背景: 黄色; }
.box4 {幅: 300px; フロート: 左; 高さ: 300px; 背景: 青; }
.box5 {float: 左; 幅: 300px; 高さ: 400px; 背景: 緑;}
.on { 幅: 50px; 高さ: 300px; 背景: ピンク; }
<div class="box">
        <div class="box1"> ボックス1 </div>
        <div class="box2"> ボックス2 </div>
        <div class="box3"> ボックス3 </div>
        <div class="box4"> ボックス4 </div>
        <div class="box5"> ボックス5 </div>
</div>
<div class="on"> </div>

親要素ボックスに高さを追加しないと、ボックスの高さは 0 になり、ボックスの兄弟要素は上方に押し出され、フローティング要素は親の兄弟要素を覆います。

5. 解決方法（メリットとデメリット）

（１）親divが高さを定義する

<スタイル タイプ="text/css">
/*ソリューションコード*/
.div1{背景:#000080;境界線:1px 赤一色; 高さ: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 と異なる場合、問題が発生します。

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

（２）最後に空の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{クリア:両方;高さ:0;オーバーフロー:非表示;}
</スタイル>
<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が追加され、人々に不快感を与えます。

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

（３）親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;overflow:hidden;}
.clearfloat{ズーム:1}
</スタイル>
<div class="div1 クリアフロート">
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="div2">
div2
</div>

原理: IE8 以上および IE 以外のブラウザは :after をサポートしています。原理は方法 2 と同様です。Zoom (IE 専用プロパティ) は、IE6 および IE7 のフローティング問題を解決できます。

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

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

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

（4）親divはoverflow:hiddenを定義する

<スタイル タイプ="text/css">
/*ソリューションコード*/
.div1{背景:#000080;境界線:1px 赤;幅:98%;オーバーフロー:非表示}
.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 を深く理解している場合にのみ推奨されます。

（５）親divはoverflow:autoを定義する

<スタイル タイプ="text/css">
/*ソリューションコード*/
.div1{背景:#000080;境界線:1px 赤;幅:98%;オーバーフロー:自動}
.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{背景:#000080;境界線:1px 赤;幅:98%;下部余白: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>

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

利点: 利点なし

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

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

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

<スタイル タイプ="text/css">
;/*ソリューションコード*/
.div1{background:#000080;border:1px solid redwidth: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属性をテーブルに変換する

利点: 利点なし

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

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

（８）最後に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を追加します。

要約する

CSS floatプロパティの詳しい説明はこれで終わりです。CSS floatに関するより詳しい内容は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: HTMLはテキスト行のインターセプトの実装原理とコードを超えています

>>: MySQL で 2 つのセットの交差/差/和を取得する方法