1. 従来の Web ページ レイアウトの 3 つの方法
Web ページのレイアウトの本質: CSS を使用してボックスを配置し、対応する位置にボックスを配置します。
CSS は 3 つの従来のレイアウト方法 (簡単に言えば、ボックスの配置方法) を提供します。
(1) 通常ストリーム（標準ストリーム）
(2) フローティング
(3) 位置決め
これは従来のレイアウトのみを指しますが、実際には、特別で高度なレイアウト方法がいくつかあります。
2. 標準ストリーム（通常ストリーム/ドキュメントストリーム）
いわゆる標準フロー: タグは規定のデフォルトの方法で配置されます。
(1) ブロックレベル要素は専用行を占有し、上から下の順に配置されます。
(2) インライン要素は左から右の順に配置され、親要素の端にぶつかると自動的に折り返されます。
上記はすべて標準的なフローのレイアウトです。標準的なフローは、最も基本的なレイアウト方法です。
これら3つのレイアウト方法はいずれもボックスを適切な位置に配置することで、自然にレイアウトが完成します。
注: 実際の開発では、ページには基本的にこれら 3 つのレイアウト方法が含まれます (モバイル端末は後で新しいレイアウト方法を学習します)。
3. なぜフローティングが必要なのでしょうか?
質問: 標準ストリームを使用して次の効果を簡単に実現できますか?
1. 複数のブロックレベルのボックス (div) を水平方向に一列に配置するにはどうすればよいですか?
インライン ブロック要素に変換すると 1 行の表示が実現できますが、要素間に大きな空白ができるため、制御が困難になります。
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Practicalcontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>インライン ブロックの中央に隙間があります</title><style>div{width:150px;height:200px;background-color:#d87093;display:inline-block;}</style></ head><body>< div>1</div><div>2</div><div>3</div></body></html>実行結果:
2. 2 つのボックスを左右に揃えるにはどうすればよいですか?
このとき、フローティングを使用してレイアウトを完成させることができるレイアウト効果が数多くあります。 フローティングにより要素ラベルのデフォルトの配置が変更される可能性があるためです。
float の最も典型的なアプリケーション: 複数のブロックレベルの要素を連続して表示できます。
Web ページ レイアウトの最初のルール: 垂直に配置された複数のブロック レベル要素は標準フローを探し、水平に配置された複数のブロック レベル要素はフロートを探します。
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Practicalcontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>複数のブロックレベルの要素が水平方向にフローティングで配置されます</title><style>div{float:left;width:150px;height:200px;background-color:#d87093;}</style></head><本文 ><div>1</div><div>2</div><div>3</div></body></html>実行結果:
4. フローティングとは何ですか?
float プロパティはフローティング ボックスを作成するために使用され、左端または右端が包含ブロックまたは別のフローティング ボックスの端に触れるまで脇に移動します。
文法：
セレクター {float: 属性値;}例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatibilitycontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Document</title><style>/*フローティング ラベルは上揃え*//*フローティング: 1 行に配置され、幅と高さが有効になります -- フローティング ラベルにはインライン ブロックの特性があります*/.one{width :100px;height:100px;background-color:pink;float:left;margin-top:50px;}.two{width:200px;height:200px;background-color:skyblue;float:left;/*があるためフローティングなので有効になりません - ボックスを水平方向に中央揃えにすることはできません*/margin:0auto;}.three{width:300px;height:300px;background-color:orange;}</style></head><body>< div>1</div><div >2</div><div>3</div></body></html>実行結果:
