CSS Float(浮动)

CSS Float（フロート）とは何ですか？

CSS の Float（フロート）は、要素を左または右に移動させ、その周囲の要素も再配置されます。

Float（フロート）は、よく画像に使用されますが、レイアウトの際にも同様に非常に役立ちます。

要素はどのようにフロートするか

要素の水平方向のフロートは、要素が左右にのみ移動でき、上下には移動できないことを意味します。

フロート要素は、その外側の端が包含ボックスまたは別のフロートボックスの境界線に触れるまで、できるだけ左または右に移動しようとします。

フロート要素の後の要素は、その周りを囲みます。

フロート要素の前にある要素は影響を受けません。

画像が右にフロートされている場合、後続のテキストフローはその左側を囲みます：

互いに隣接するフロート要素

複数のフロート要素を一緒に配置すると、スペースがあればそれらは互いに隣接します。

ここでは、イメージギャラリーに float プロパティを使用します：

フロートの解除 - clearを使用

要素がフロートした後、周囲の要素が再配置されます。この状況を避けるために、clear プロパティを使用します。

clear プロパティは、要素の両側にフロート要素が表示されないように指定します。

clear プロパティを使用して、テキストにイメージギャラリーを追加します：

更多实例

画像に枠線と余白を追加し、段落の右側にフロートさせます

画像にボーダーとマージンを追加し、段落の右側にフロートさせましょう

見出しと画像は右側にフロートする

見出しと画像を右側にフロートさせます。

段落の最初の文字を左にフロートさせる

スタイルを変更して、段落の最初の文字を左側にフロートさせます。

テーブルのないWebページを作成する

float を使用して、Webページのヘッダー、フッター、左側のコンテンツ、メインコンテンツを作成します。

CSSのすべてのフロートプロパティ

"CSS" 列の数字は、異なる CSS バージョン（CSS1 または CSS2）でそのプロパティが定義されたことを示します。