CSS Float(フロート)
CSS Float
CSS Float とは何ですか?
CSS Float は要素を左右に移動し、周囲の要素も再配置されます。
Floatは画像によく使われますが、レイアウトにも非常に便利です。
要素の浮遊方法
要素は水平方向に浮動します。つまり、要素は左右にのみ移動でき、上下には移動できません。
フローティング要素は、その外縁がそれを含むボックスまたは別のフローティング ボックスの境界線に触れるまで、左または右に移動しようとします。
フロート要素の後の要素がそれを囲みます。
フローティング要素の前の要素は影響を受けません。
CSS float フローティング属性
この記事では、要素が浮動する方向を定義する float 属性を主に紹介します。
1. ページレイアウト方法: ドキュメントフロー、フローティングレイヤー、フロート属性を導入します。
2. float:left: floatを左にした場合のレイアウト方法を紹介します。
3. float:right: float が right の場合のレイアウト方法を紹介します。
4. 隣接する要素に float 属性が含まれる: 隣接する要素に float 属性が含まれる場合のレイアウト方法を紹介します。
1. ページ レイアウト方法
ページ レイアウト方法には、主にドキュメント フロー、フローティング レイヤー、フロート属性が含まれます。
1.1 ドキュメント フロー
HTML ページの標準的なドキュメント フロー (デフォルト レイアウト) は、上から下、左から右で、ブロック (ブロック レベルの要素) に遭遇すると改行が入ります。
1.2 フローティングレイヤー
フローティングレイヤー: 要素の float 属性に値を割り当てた後、要素はドキュメント フローから分離され、親要素の左右の境界線の近くで左右にフローティングします (デフォルトは本文エリア)。
浮動要素は、ドキュメント フローの空いた位置にある後続の (非浮動) 要素によって埋められます。ブロック レベルの要素は直接埋められます。範囲が浮動要素と重なる場合、浮動要素はブロック レベルをカバーします。要素。インライン要素: スペースがある場合は挿入します。
1.3 float 属性の紹介
① left: 要素は左にフロートします。
② right: 要素は右にフロートします。
③ none: デフォルト値。
④inherit: 親要素からfloat属性を継承します。
りー