float:左/右/なし; 1. 同じレベルフローティング (1)ブロックレベル要素を同じ行に表示する(同じ行に表示する要素はすべてフロートさせる必要がある) <div class="box1">ボックス1</div> <div class="box2">ボックス2</div> <div class="box3">ボックス3</div> .box1{ 境界線: 2px 実線の赤; 幅: 40px; 高さ:100px; フロート:左; } .box2{ 境界線: 6px 黒一色; 幅:100ピクセル; 高さ:40px; フロート:左; } .box3{ 境界線: 12px 青実線; 幅:100ピクセル; 高さ:300px; フロート:左; } (2)インライン要素が幅と高さをサポートするようにする <span class="box1"></span> .box1{ 境界線: 2px 実線の赤; 幅: 40px; 高さ:100px; フロート:左; } 3. 幅または高さが設定されていない場合は、幅と高さはコンテンツによって拡張されます。 <span class="box1">こんにちは</span> .box1{ 境界線: 2px 実線の赤; フロート:左; } 4. 要素にフロートを追加すると、その要素は標準のドキュメント フロー (ドキュメント フローはドキュメント内のオブジェクトの位置を指します) から外れ、その要素をカバーするためにフロートされていない要素 (後方にフロート) を探すことになり、前の要素とは関係がなくなります。 <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> .box1{ 境界線: 1px 実線の赤; 幅: 40px; 高さ:100px; フロート:左; } .box2{ 境界線: 4px 青実線; 幅: 140ピクセル; 高さ:40px; フロート:左; } .box3{ 境界線: 8px の灰色 幅: 200ピクセル; 高さ:200px; } 5. 要素がフロートされている場合、その要素はまず標準フローを離れ、次にフロート方向に従ってフロートし、前のフロート要素の境界に当たって停止するか、前のレイヤーが要素を収容できずに落ちて次の行に配置されます。 <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> .box1{ 境界線: 11px 赤 幅: 40px; 高さ:100px; フロート:右; } .box2{ 境界線: 4px 青実線; 幅: 140ピクセル; 高さ:40px; フロート:左; } .box3{ 境界線: 8px の灰色 幅: 200ピクセル; 高さ:200px; } 6. 要素Aがフロートしていない要素Bの上にフロートすると、Bのコンテンツの元の位置が押し出され、さらには押し出されてしまう。 <div class="box1">ボックス1</div> <div class="box2">ボックス2</div> <div class="box3">ボックス3</div> .box1{ 境界線: 11px 赤 幅: 40px; 高さ:100px; } .box2{ 境界線: 4px 青実線; 幅: 60ピクセル; 高さ:100px; フロート:左; } .box3{ 境界線: 8px の灰色 幅: 200ピクセル; 高さ:200px; } 分析する際、要素がフローティング状態の場合は、その前の要素のみを参照します。前の要素もフローティング状態の場合は、並べて表示されます。前の要素がフローティング状態でない場合は、相対的な位置は変更されません。 詳細な分析: https://www.jb51.net/web/76691.html 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
>>: HTML は、Web ページの作成者が学習して習得しなければならないものです。
VMware で仮想マシンを作成し、Redhat Linux オペレーティング システムをインスト...
具体的な方法: (推奨チュートリアル:MySQLデータベース学習チュートリアル)テーブルロックの状態...
zip インストール パッケージをダウンロードします。 MySQL8.0 For Windows z...
この記事では、ES6 の for ... of ループについて説明します。古い方法以前は、JavaS...
質問docker で gdb を実行すると、ブレークポイントに到達しますが、ブレークポイントに入るこ...
ドラッグ アンド ドロップ API は、ドラッグ可能な要素を HTML に追加し、ドラッグ可能な豊富...
最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...
目次1. 穴に落ちる2. 無駄な努力3. 若さの衝動4. 希望の光5. 問題KO 6. 追記1. 穴...
最近、vue について読みました。これまで基本的に見落としていた単一ファイル コンポーネントを見つけ...
3D効果を実現するには、主にCSSのpreserve-3dプロパティとperspectiveプロパテ...
MySQL の全体的なアーキテクチャは、サーバー層とストレージ エンジン層に分かれています。サーバー...
この作品はフロントエンド開発(JSコンテンツ)の知識を使用していますが、フロント部分の後半部分の知識...
Dockerはますます普及しています。環境を軽量かつ柔軟に分離し、容量を拡張し、運用保守管理を容易に...
休憩中に、眠気を完全に吹き飛ばす電話がかかってきました。「開発者が更新 SQL を書くときに whe...
目次1. 原因2. デバイス情報3. 準備4. Apacheをインストールする5. gitを設定する...