last modified 10th/Oct. 2000
要素の浮動化は CSS によってより柔軟に指定できます。
STYLE 要素での宣言；
<head>
<title>vertical-align の例</title>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
img { float: left }
p { clear: left }
-->
</style>
</head>
この例では、当該文書中に現れる全ての IMG 要素が左端にフロートするように指定されています。
且つ、当該文書中に現れる全ての P 要素が左側のフロート要素に対して、流れ込むことを禁止されています。
ここは段落要素の内容部です。
この文書中に挿入された画像は全て左端にフロートします。従って、普通に書いているだけで、後続の要素やテキストは画像の右側に周り込もうとします。この段落要素にもスタイル宣言 clear:left が適用されていることに注意してください。
しかし、段落要素は左端のフロート要素に対して、周りこみが禁じられているので、段落が改まると、フロート要素の下端から新たに行を始めます。
clear プロパティは、先行する浮動要素に対するものであり、子孫要素に浮動要素を持っていても、何も影響しません。
CSS の 'float' プロパティと 'clear' プロパティの概要です；
| float | left | right | none | inherit |
|---|
'position' プロパティで absolute | fixed が指定されていない要素に限り、あらゆる要素に指定できます。
none です。例えば、 position: absolute が指定されていると、 float プロパティは無視されます。
浮動化されたボックスの四方のマージンは、隣接する如何なるボックスとも相殺せず、隣接するマージンの値は単純に加算されます。
| clear | none | left | right | both | inherit |
|---|
none です。clear プロパティは、ボックスの右側か左側（或は両方）が、先行する浮動化された要素に対して隣接してはならないかどうかを指定します。先行する要素に対してだけ有効で、子要素に浮動化された要素があっても、この要素に対しては何も影響しません。
ここでは CSS プロパティが値に取り得るキワードの意味に付いては説明しません。詳しくは、「CSS 入門」を参照ください。
或る一つの要素だけにスタイルを適用したい場合は、 id 属性を利用するか、 style 属性によるインラインスタイルを利用します。
インラインスタイルの例
<p style="clear:left"> この要素は左側のフロート要素の直下のから新たに行を始めます。 </p>
或る一つの要素だけを浮動化したい場合も、同様に id 属性かインラインスタイルを利用します。今度は id 属性を利用します；
HEAD 要素の中
<title>vertical-align の例</title>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
p#hogehoge { float: left; width: 40% }
-->
</style>
BODY 要素の中
<p id="hogehoge"> この要素は左端にフロートします。 </p>