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

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. 解決方法(メリットとデメリット)

(1)親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 と異なる場合、問題が発生します。

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

(2)最後に空の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が追加され、人々に不快感を与えます。

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

(3)親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 を深く理解している場合にのみ推奨されます。

(5)親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属性をテーブルに変換する

利点: 利点なし

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

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

(8)最後に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 つのセットの交差/差/和を取得する方法

推薦する

Centos7 への mysql8.0rpm のインストール チュートリアル

まず、図をダウンロードしてください 1. まず、centos7に付属しているmariadbをアンイン...

Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明

目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...

Vueは虫眼鏡付きの検索ボックスを実装します

この記事では、Vueを使用して虫眼鏡付きの検索ボックスを実装する方法を紹介します。具体的な内容は次の...

vue+tp5はシンプルなログイン機能を実現

この記事では、参考までに、簡単なログイン機能を実装するためのvue+tp5の具体的なコードを紹介しま...

MySQLログシステムの詳細情報共有

大規模なシステムに取り組んだことがある人なら誰でも、ログの役割を過小評価してはならないことを知ってい...

Vue 学習 - VueRouter ルーティングの基礎

目次1. Vueルーター1. 説明2. 選択したルートのレンダリング: 3. 基本的な動作原理2. ...

Uniappがスライディングスコアリング効果を実現

この記事では、スライディングスコアリングを実装するためのuniappの具体的なコードを参考までに共有...

Vue パッケージアップロードサーバー更新 404 問題に対する 2 つの解決策

1: nginxサーバーソリューション、.conf構成ファイルを変更する解決策は2つある1: 位置 ...

Windows 8 での ssh コマンドの使用記録

1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...

Windows はリモート デスクトップが長時間自動的に切断されるのを防ぎます

Windows リモート デスクトップを使用してサーバーに接続したことがある人なら、リモート デスク...

リモート Linux システムでポートが開いているかどうかを確認する 3 つの方法

これは、Linux 管理者だけでなく、私たち全員にとって非常に重要なトピックです。つまり、IT イン...

Chrome タブバーを実装するための CSS のヒント

今回は、Google Chrome のタブバーのような、特殊な丸い角を持つナビゲーション バーのレイ...

Linux parted ディスク パーティション実装手順の分析

fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...

Dockerイメージをインポートおよびエクスポートする方法

この記事では、移行、バックアップ、アップグレードなどのシナリオで使用される Docker イメージの...