cman.jp > WEBページ作成TOP > CSSリファレンス > 「配置と回り込み」
WEBページ作成
広告
float 「配置と回り込み」
「float」は、指定した要素を左または右に寄せて配置する場合に、使用します。後に続く要素は、その反対側に回り込みます。
画像以外の要素に指定する場合は、幅を明確化するため、「width」の指定が必要です。
絶対位置に配置された要素（「position」の値が、absolute、または、fixedを指定された要素）では、「float」の指定は、無視されます。
回り込みの指定を解除する場合は、「clear」を指定します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 | 全要素 | しない |
広告
floatの指定方法
| 構文 | ||
|---|---|---|
|
float : left | right | none; |
||
| プロパティ/設定値 | 意味 | |
| float : left float : right float : none |
要素を左側に寄せる。後に続く内容はその右側に回り込む。 要素を右側に寄せる。後に続く内容はその左側に回り込む。 回り込みを行わない。（初期値） デフォルト：「タグ毎のスタイル初期値」を参照 |
|
float のサンプル
.boxLeft{
width: 50%;
height: 50px;
background-color: #85b9e9;
float : left;
}
.boxRight{
width: 50%;
height: 50px;
background-color: #85b9e9;
float : right;
}
.floatLeft{float : left;}
.floatRight{float : right;}
.clearBoth {clear: both;}
.clearLeft {clear: left;}
.clearRight {clear: right;}
<!-- html -->
<div style="margin-top:10px;padding:10px;border:1px solid #666;">
<img src="neko_w100.jpg" class="floatLeft">
<img src="neko_w100.jpg" class="floatRight">
<p>画像を両側に寄せて配置します。</p>
<p>後に続くこのテキストは両側で回り込んでます。</p>
<p class="clearBoth">両側の回り込みを解除しました。</p>
</div>
<div style="margin-top:10px;padding:10px;border:1px solid #666;">
<div class="boxRight">
ボックスを右に配置<br><br>
width: 50%;を指定
</div>
<p>ボックスを右に寄せて配置します。</p>
<p>後に続くこのテキストは左側に回り込んでます。</p>
<p class="clearRight">左側の回り込みを解除しました。</p>
</div>
<div style="margin-top:10px;padding:10px;border:1px solid #666;">
<div class="boxRight">
ボックスを左に配置<br><br>
width: 50%;を指定
</div>
<p>ボックスを左に寄せて配置します。</p>
<p>後に続くこのテキストは右側に回り込んでます。</p>
<p class="clearLeft">右側の回り込みを解除しました。</p>
</div>
画像を両側に寄せて配置します。
後に続くこのテキストは両側で回り込んでます。
両側の回り込みを解除しました。
ボックスを右に配置
width: 50%;を指定
width: 50%;を指定
ボックスを右に寄せて配置します。
後に続くこのテキストは左側に回り込んでます。
左側の回り込みを解除しました。
ボックスを左に配置
width: 50%;を指定
width: 50%;を指定
ボックスを左に寄せて配置します。
後に続くこのテキストは右側に回り込んでます。
右側の回り込みを解除しました。
| 関連するCSS(STYLE) | |
|---|---|
| bottom | 基点の下辺からの距離 |
| caption-side | テーブルのキャプションの表示位置 |
| clear | 回り込みの解除 |
| display | ボックスの種類 |
| overflow | オーバーフローしたコンテンツの表示 |
| overflow-x | 横方向にオーバーしたコンテンツの表示 |
| overflow-y | 縦方向にオーバーしたコンテンツの表示 |
| position | 配置方法 |
| vertical-align | 縦（垂直）方向の文字位置 |
| z-index | ボックスの重なり順 |
| left | 基点の左辺からの距離 |
| right | 基点の右辺からの距離 |
| top | 基点の上辺からの距離 |
広告