clear

CSSのfloatプロパティで回り込み指定している場合に、回り込みの解除を行います。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ clear : 値; }

▲PageTop

指定できる値

値 初期値 意味
left 左側の回りこみを解除します。
right 右側の回りこみを解除します。
both 両側の回りこみを解除します。
none ○ 回り込みを解除しません。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        clear : left;
        width : 20%;
      }
      #sample2 {
        clear : right;
        width : 20%;
      }
      #sample3 {
        clear : both;
        width : 30%;
      }
      #sample4 {
        float : left;
        width : 20%;
        border : solid 1px #999999;
      }
      #sample5 {
        float : right;
        width : 20%;
        border : solid 1px #999999;
      }
    </style>
  </head>
  <body>
    <div id="sample4">左への回り込みサンプル</div>
    サンプルは右側に回り込みを許可しています。
    <br id="sample1">右側への回り込み許可が解除されました。<br><br>
    <div id="sample5">右への回り込みサンプル</div>
    サンプルは左側に回り込みを許可しています。
    <br id="sample2">
    左側への回り込み許可が解除されました。<br><br>
    <div id="sample4">左への回り込みサンプル</div>
    左側の要素の右側・右側の要素の左側への回りこみが許可されています。
    <div id="sample5">右への回り込みサンプル</div>
    <br id="sample3">
    両側の回りこみが解除されました。
  </body>
</html>

表示結果

左への回り込みサンプル
サンプルは右側に回り込みを許可しています。
右側への回り込み許可が解除されました。

右への回り込みサンプル
サンプルは左側に回り込みを許可しています。
左側への回り込み許可が解除されました。

左への回り込みサンプル
左側の要素の右側・右側の要素の左側への回りこみが許可されています。
右への回り込みサンプル

両側の回りこみが解除されました。

▲PageTop

関連項目

CSS

float

▲PageTop

▲