clear:left; によるfloatの解除の論理構造

Question

にんにちは。
ProgateHTML&CSSの上級編をしています。
.clear{Clear:left;}を勉強中です。

この解説の中で
Floatは「宙に浮いている」という意味だから高さを持たないとありました。
そのため高さを持たせるためには仮の<div class="clear>タグを用意してそのclearクラスに.clear{Clear:left;}を適応させることで高さを持たせることができるとありました。

<div class="container">
        <div class="heading">
          <h2>Learn Where to Get Started!</h2>
        </div>
        <div class="lessons">
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/html.png">
              <p>HTML & CSS</p>
            </div>
            <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
              <p>jQuery</p>
            </div>
            <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/ruby.png">
              <p>Ruby</p>
            </div>
            <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/php.png">
              <p>PHP</p>
            </div>
            <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
          </div>
          <!-- clearクラスをもつ<div>タグを追加してください -->
          <div class="clear"></div>
          
        </div>
      </div>

.lesson {
  float: left;
  width: 25%;
}

そもそも宙に浮いているとされ、Floatが適応されているのはlessonタグです。

それならばlessonタグのfloatを解除する必要があると思い
.lesson{float:left；}とならないとおかしい（これを行うと、左よせにならない）。と思っています。
なぜ仮の<dix class="clear">タグを使用する理由を教えてくださいませんでしょうか。

宜しくお願いします。

Answer 1

.lesson{float:left；}とならないとおかしい（これを行うと、左よせにならない）。と思っています。

いえ、考え方が違います。

CSS の clear プロパティは、要素が先行する浮動要素の下に移動 (clear) する必要があるかどうかを設定します。（MDNより）

つまり、clearはフロートのあとに続く要素にかけるものです。

Comments

[loveapple2002]

遅くなりすみません。
ありがとうございます！！