概要
CSSプロパティ｢clear｣ は、float プロパティによって右寄せ、左寄せを指定された要素に対して、回り込みの解除をすることができます。
<div class="float-left">
float: left要素
</div>
<div class="float-right">
float: right要素
</div>
<div class="clear">
clear: 回り込み解除指定
</div>
<style>
div {
border: 1px solid #000;
margin-bottom: 10px;
}
.float-left {
float: left;
width: 150px;
}
.float-right {
float: right;
width: 150px;
}
.clear {
clear: both;
}
</style>値の指定方法
{ clear: 値 }float プロパティで指定された要素に対して各値の振る舞いです。
| 値 | 説明 |
|---|---|
| left | 左寄せを解除します |
| right | 右寄せを解除します |
| both | すべて解除します |
| none | 解除しません |
使用方法
現場でよく使われる例です。回り込みを解除する為専用のclassを作り回り込みをする要素の親要素に付与します。そしてこのclassは擬似要素を使って、回り込み解除用のコンテンツを挿入します。そうすることで、その他のコンテンツに影響が出ないようにします。
<div class="clear">
<div class="float-left">
float: left要素
</div>
<div class="float-right">
float: right要素
</div>
</div>
<div>回り込み以降の要素</div>
<style>
div {
border: 1px solid #000;
margin-bottom: 10px;
}
.float-left {
float: left;
width: 150px;
}
.float-right {
float: right;
width: 150px;
}
.clear:after {
content: "";
clear: both;
display: block;
height: 0;
}
</style>