divを横に並べる - float - いろいろだなぁ

<html>
	<head>
		<title>css float</title>
		<style type="text/css">
			div.floatClass01{
				border : 1px #000000 solid;
				width  : 20%;
				float  : left;
				margin : 10px;
			}
			div.floatClass02{
				border : 1px #000000 solid;
				width  : 30%;
				float  : left;
				margin : 10px;
			}
			div.floatClearClass01{
				border : 1px #000000 solid;
				width  : 50%;
				clear  : both;
				margin : 10px;				
			}
		</style>
	</head>
	<body>
		<div class="floatClass01">
			<h1>title</h1>
			<p align="center">paragraph</p>
			test1
		</div>
		<div class="floatClass01">
			<h1>title</h1>
			<p align="center">paragraph</p>
			test2
		</div>
		<div class="floatClass02">
			<h1>title</h1>
			<p align="center">paragraph</p>
			test3
		</div>
		<div class="floatClearClass01">
			<h1>title</h1>
			<p align="center">paragraph</p>
			test4
		</div>
	</body>
</html>

float設定は「clear:both;」で解除しないと、これ以降も機能し続けてしまう。
・・・IE6.0だとキレイに並ばない・・・