float, clearの使い方

float, clear

プロパティの説明

floatは、要素を左右に配置し、続く要素を回り込ませるプロパティです。全ての要素に指定することができます。

clearは、回り込みを解除するためのプロパティです。ブロック要素に指定することができます。

指定できる値

left: floatに指定：要素を左に配置し、続く要素を右に回り込ませます。
right: floatに指定：要素を右に配置し、続く要素を左に回り込ませます。
left: clearに指定：左側に配置された状態を解除します。
right: clearに指定：右側に配置された状態を解除します。
none: clearに指定：両側のfloatを解除します。

サンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title>サンプルページ</title>
 <style type="text/css">
 <!--
 .f1{float:left;}
 .c1{clear:left;}
 -->
 </style>
</head>

<body>
 <h1>サンプルページ</h1>
 <p class="f1"><img src="../img/banner/pluto01.gif"></p>
 <p>右に回り込んでいます。</p>
 <p>右に回り込んでいます。</p>
 <p class="c1">回り込みを解除しています。</p>
</body>

</html>