[CSS] 基本メモ: clearプロパティ – 端くれプログラマの備忘録

left
左寄せされた要素に対する回り込みを解除。

right
右寄せされた要素に対する回り込みを解除。

both
全ての要素に対する回り込みを解除。

none
回り込みを解除しない。

サンプル

<h2>Hello</h2>
<div id="sample1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
</div>
<h2>World</h2>
<div id="sample2">
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<h2>Hello</h2>

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

</div>

<h2>World</h2>

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

<style>
h2 { float: left; }
#sample1 { color: red; }
#sample2 { color: blue; }
</style>

<style>

h2 { float: left; }

#sample1 { color: red; }

#sample2 { color: blue; }

</style>

<style>
h2 { float: left; }
#sample1 { color: red; }
#sample2 { color: blue; clear: left; }
</style>

<style>

h2 { float: left; }

#sample1 { color: red; }

#sample2 { color: blue; clear: left; }

</style>

参考サイト

clear－スタイルシートリファレンス
http://www.htmq.com/style/clear.shtml

サンプル

参考サイト

関連記事