clear: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

clear は、回り込みを解除するプロパティです。

このプロパティは、floatプロパティによる回り込みを途中で解除したい場合に使用します。


.example {
clear: left;
}
プロパティ名 値 説明
clear none 回り込みを解除しない （初期値）
left 左フロートに対する回り込みを解除
right 右フロートに対する回り込みを解除
both どちらの回り込みも解除

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

div.example {
width: 100%;
}

div.example div {
width: 30%;
height: 150px;
background-color: #85b9e9;
float: left;
}

.clearLeft { 
clear: left; 
}

</style>

</head>
<body>

<div class="example">

<div>
<p>ボックスを左に配置</p>
</div>

<p>左フロートに対する回り込み。</p>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>

<p class="clearLeft">回り込みを解除しました。</p>

</div>

</body>
</html>
表示例

ボックスを左に配置

左フロートに対する回り込み。

サンプルテキスト。サンプルテキスト。サンプルテキスト。

回り込みを解除しました。