フローティングにより、要素が元の位置を離れ、親要素のコンテンツ領域の境界または他のフローティング要素に触れるまで、親要素のコンテンツ領域内で左または右に移動する可能性があります。さらに、フローティング要素の後に定義されたテキストまたはインライン要素は、フローティング要素の片側に回り込むため、Word でのグラフィックスとテキストの混合配置と同様に、テキストの折り返しの効果を得ることができます。
図: float 属性のデモ
図: clear 属性のデモ
注: float 属性は、絶対配置されていない要素に対してのみ有効です. 浮動要素に続くテキストまたはインライン要素は、浮動要素の反対側に折り返されます. たとえば、左に浮動すると、他の要素が折り返されます.フロート要素の右側。
次の表に示すように、float 属性には 3 つのオプションの値があります。
| 価値 | 説明 |
|---|---|
| left | 要素は左にフロートします |
| right | 要素が右に浮く |
| none | デフォルトでは、要素はフローティングされていません |
| inherit | float 属性の値を親要素から継承する |
また、float 属性を使用する場合は、次の点に注意する必要があります。
- float 属性が設定され、属性の値が none でない場合、display 属性の値が inline-table の場合、表示は実際には table に設定されます; display 属性の値が inline の場合、inline- block, run-in, table -* 等しい値の場合、表示は実際にはブロックに設定され、それ以外の場合は変更されません。
- 要素が絶対配置で設定されているか、display 属性の値が none の場合、float 属性は無効です。
- 隣接する浮動要素は、十分なスペースがある場合、互いに隣り合って一列に配置されます。
【例】要素にfloat属性を設定する場合はfloat属性を使用：
<!DOCTYPE html>
<html>
<head>
<style>
.a-box {
width: 445px;
height: 120px;
border: 1px solid red;
padding: 20px;
overflow: hidden;
}
.b-box {
width: 100px;
height: 100px;
border: 1px solid green;
color: red;
}
.c-box {
width: 445px;
height: 120px;
border: 1px solid red;
padding: 20px;
}
.d-box {
width: 100px;
height: 100px;
border: 1px solid green;
float: left;
color: red;
}
</style>
</head>
<body>
<div class="a-box">
浮動指的是、floatプロパティが設定された要素を、通常の位置から親要素内容領域内で左または右に移動させ、<div class="b-box">フロートしていない要素</div>親要素内容領域の境界または他のフロート要素に当たるまで、親要素中のテキストとインライン要素はフロート要素に囲まれます。
</div>
<div class="c-box">
浮動指のは、floatプロパティが設定された要素を、通常の位置から親要素内容領域内で左または右に移動させ、<div class="d-box">左に浮動する要素</div>親要素内容領域の境界または他のフロート要素に当たるまで、親要素中のテキストとインライン要素はフロート要素に囲まれます。
</div>
</body>
</html> 実行結果は次の図のとおりです。
コンテンツ
表示
クリアフロート
要素がフローティングされた後, 周囲の要素に一定の影響を与えます. この影響を排除するために, クリア属性を使用してフロートをクリアできます. 属性のオプション値は次のとおりです:
| 価値 | 説明 |
|---|---|
| left | フローティング要素は左側では許可されていません |
| right | フローティング要素は右側では許可されていません |
| both | フローティング要素は左右に許可されていません |
| none | フローティング要素を左右に表示できるデフォルト値 |
| inherit | 親要素から clear 属性の値を継承する |
次の例は、clear 属性の使用方法を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 480px;
height: 260px;
border: 1px solid red;
}
.a-box {
width: 50px;
height: 150px;
background-color: #CCC;
float: left;
}
.b-box {
width: 155px;
height: 60px;
border: 1px solid black;
float: left;
}
.c-box {
width: 100px;
height: 100px;
background-color: #007FFF;
clear: left;
}
</style>
</head>
<body>
<div class="box">
<div class="a-box">a-box</div>
<div class="b-box">b-box</div>
<div class="c-box">c-box</div>
</div>
</body>
</html> 実行結果は次の図のとおりです。
実行結果からわかるように、a-box と b-box の 2 つの要素に float 属性を設定すると、c-box が上に移動し、a-box と b-box に重なります。 add clear プロパティは、フロートをクリアしてこの問題を解決します。
「 CSS float (フローティング)」についてわかりやすく解説！絶対に観るべきベスト2動画
HTML&CSS補足編 #10 floatを使った回り込みレイアウトをマスター！
第18回：CSSのfloatの仕組み【実践プログラミング講座】
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
