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属性を継承します。