[新着] Webテンプレートを仮オープンしました
float は、回り込みを指定するプロパティです。
ボックスを左か右に寄せて、逆側にテキストなどを回り込ませることができます。
div {
float: left;
}
| float | left … （ボックスを左に配置・テキストなどを右側に回り込ませます） |
|---|---|
| right … （ボックスを右に配置・テキストなどを左側に回り込ませます） | |
| none … （指定なし）デフォルト |
回り込みを終了させるための clear プロパティもご覧ください。
【IEの不具合】
※背景色（または背景画像）が指定された要素内で回り込みの指定を行うと、回り込ませたテキストの一部が消えたり、背景色の一部が反映されなかったり、といった不具合が発生する場合があります。（親要素に対してサイズの指定（width）を行っておくと、この不具合を回避することができます。）
※回り込みを指定したボックスに左右のマージンを指定すると、片側のマージンの大きさが2倍になってしまうようです。
■テキストの回り込み
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#exampleA {
width: 100%;
}
#example1 {
width: 50%;
height: 100px;
background-color: #85b9e9;
float: left;
}
#example2 {
width: 50%;
height: 100px;
background-color: #85b9e9;
float: right;
}
-->
</style>
</head>
<body>
<div id="exampleA">
<div id="example1">ボックスを左側に表示</div>
<p>
ボックスの右側に<br>
複数行のテキストを<br>
表示してみます
</p>
<p style="clear: left;">--- 回り込みを解除 ---</p>
<div id="example2">ボックスを右側に表示</div>
<p>
ボックスの左側に<br>
複数行のテキストを<br>
表示してみます
</p>
<p style="clear: right;">--- 回り込みを解除 ---</p>
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
ボックスの右側に
複数行のテキストを
表示してみます
--- 回り込みを解除 ---
ボックスの左側に
複数行のテキストを
表示してみます
--- 回り込みを解除 ---
■ボックスを横に並べる
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#exampleB {
width: 520px;
}
.example3 {
width: 150px;
height: 100px;
background-color: #85b9e9;
margin-right: 20px;
float: left;
}
-->
</style>
</head>
<body>
<div id="exampleB">
<div class="example3">左側のボックス</div>
<div class="example3">中央のボックス</div>
<div class="example3">右側のボックス</div>
<p style="clear: both;">ボックスを並べてみました</p>
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
ボックスを並べてみました
