書式 clear:回り込み方法
対象ブロックレベル要素
継承しない
初期値 none
解説
回り込みの解除方法を指定します。以下のものが指定できます。
| 設定名 | 内容 |
|---|
| none | 回り込みを解除しない |
| left | 左の回り込みを解除 |
| right | 右の回り込みを解除 |
| both |
両方の回り込みを解除 |
サンプルコード
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<style type="text/css"><!--
body { margin:0px; }
.mainBox { position:absolute;border:1px black solid;
background-color:gray;
left:10px;
top:10px;
width:300px;
height:100px;
}
.photo { float:left;}
.fClear {
clear:left;
}
--></style>
</head>
<body>
<img src="Default.png">
<div class="mainBox">
<img src="photo.jpg" class="photo">
Dashboard Sample Text 1<br>
<div class="fClear">Dashboard Sample Text 2<br>
Dashboard Sample Text 3<br>
Dashboard Sample Text 4<br>
</div>
</div>
</body>
</html>