CSSクリア

説明

_clear_は、要素が浮動要素の隣に表示されるのを防ぎます。

可能な値

なし-フローティング要素は要素の両側に表示される場合があります。
左-フローティング要素は要素の左側に表示されない場合があります。
right -フローティング要素は要素の右側に表示されない場合があります。
both -フローティング要素は要素の両側に表示されない場合があります。

に適用されます

すべてのブロックレベル要素。

DOM構文

object.style.clear = "top";

例

これは、このプロパティの効果を示す例です-

<html>
   <head>
      <style type = "text/css">
         div.float {
            border:1px solid #ff9900;
            width:120px;
            float: right;
         }
         div.clear {
            border:1px solid #cccccc;
            width:120px;
            clear: right;
         }
      </style>
   </head>

   <body>

      <div class = "float">
         This div has float set.
      </div>

      <div class = "clear">
         <p>
            This div has the CSS clear property set.
         </p>

         <p>
            Try changing the CSS clear values to see the effect it has on the position of the div boxes.
         </p>
      </div>

   </body>
</html>

これにより、次の結果が生成されます–

Css-clear

CSSクリア

説明

可能な値

に適用されます

DOM構文

例

目次