HTMLのクリアとはどういう意味ですか?-htmlチュートリアル-php.cn

HTMLのクリアとはどういう意味ですか?

醉折花枝作酒筹

リリース： 2021-06-07 14:49:44

オリジナル

7371 人が閲覧しました

HTMLではclearとはクリアを意味しますが、フローティング要素に「clear:属性値」を設定するだけです。 clear 属性は、要素のどの側にフローティング要素を含めることが許可されないかを定義します。余白自体は変更せずに、要素の余白の上に空きスペースが追加されます。

HTMLのクリアとはどういう意味ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS のクリアの機能は、要素のフローティング効果をクリアすることです。

CSS1 および CSS2 では、これは、クリア要素 (つまり、クリア属性が設定された要素) に上部マージンを自動的に追加することによって実現されます。 CSS2.1では要素の上マージンの上にクリアスペースが追加されますが、マージン自体は変わりません。

どのような変更を行っても、最終的な結果は同じです。左または右でクリアするように宣言されている場合、要素の上端の外枠はフローティングの下マージンのすぐ下になります。その側の要素。

clear 属性値:

left 左側では浮動要素は許可されません。

right 右側では浮動要素は許可されません。

両方の浮動要素を左側と右側で使用することはできません。

none デフォルト値。フロート要素を両側に表示できるようにします。

inherit は、clear 属性の値を親要素から継承することを指定します。

例:

<html>
  <head>
    <style type="text/css">
      div {
        float: left;
        margin: 20px;
      }
      .three{
        clear: both;
      }
    </style>
  </head>
  <body>
    <div>
      <img  src="images/1.jpg" / alt="HTMLのクリアとはどういう意味ですか?" >
    </div>
    <div>
      <img  src="images/2.jpg" / alt="HTMLのクリアとはどういう意味ですか?" >
    </div>
    <div class="three">
      <img  src="images/3.jpg" / alt="HTMLのクリアとはどういう意味ですか?" >
    </div>
  </body>
</html>

ログイン後にコピー

効果:

HTMLのクリアとはどういう意味ですか?