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

りー


学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2.3-float属性</title> <style type="text/css"> #a { background-color:Red; height:50px; width:100px; } #b { background-color:Yellow; height:50px; width:200px; } #c { background-color:Blue; height:50px; width:300px; } #d { background-color:Gray; height:50px; width:400px; } </style> </head> <body> <div id=a >div-a</div> <div id=b>div-b</div> <div id=c>div-c</div> <input type="text" value="input1" /> <input type="text" value="input2" /> <input type="text" value="input3 " /> <div id=d>div-d</div> <input type="text" value="input4 " /> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!