「CSS」clear プロパティのサンプル

2014年5月12日2021年10月19日

説明
CSS の clear プロパティは、要素が先行する浮動要素の下に移動 (clear) する必要があるかどうかを設定します。
clear プロパティは、浮動要素と非浮動要素のどちらにも適用されます。
clear: left;要素は先行する 左の フロートと切り離され、下に移動します。
clear: right;要素は先行する 右の フロートと切り離され、下に移動します。

使用例

<style>
  .cft {
  /*float:left 要素は必ずその包含ブロックの左側に浮動*/
    float: left;
    height: 70px; width: 150px;
    border: 1px solid #000;
    background-color: skyblue;
  }
  /*clear:left 要素は先行する左のフロートと切り離され下に移動*/
  .cftC {
    clear: left;
  }
</style>
<div class="cft">テスト</div>
<p class="cftA">項目1</p>
<p class="cftB">項目2</p>
<p class="cftC">項目3</p>