clearプロパティのしくみがわからない

progateでHTML & CSSを練習している入門者ですが
clearタグの仕組みがわかりません
floatの性質で背景色が０になりclearがその性質を解除してくれることはわかるのですか入力しても適応してくれずレイアウトが崩れる始末です
背景色を子要素全部に適応させレイアウトの崩れをなくすにはどうすればよいでしょうか?

HTML
1
2 <div class="lesson-wrapper">
3      <div class="container">
4        <div class="heading">
5          <h2>Learn Where to Get Started!</h2>
6        </div>
7        <div class="lessons">
8          <div class="lesson">
9           
10            <div class="lesson-icon">
11              <img src="https://prog-8.com/images/html/advanced/html.png">
12              <p>HTML & CSS</p>
13            </div>
14            <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
15          </div>
16          <div class="lesson">
17            <div class="lesson-icon">
18              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
19              <p>jQuery</p>
20            </div>
21            <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
22          </div>
23          <div class="lesson">
24            <div class="lesson-icon">
25              <img src="https://prog-8.com/images/html/advanced/ruby.png">
26              <p>Ruby</p>
27            </div>
28            <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
29          </div>
30          <div class="lesson">
31            <div class="lesson-icon">
32              <img src="https://prog-8.com/images/html/advanced/php.png">
33              <p>PHP</p>
34            </div>
35            <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
36            </div>
37               <div class="clear"></div>
38       </div>
39      </div>
40    </div>

CSS
1
2.lesson-wrapper {
3
4  padding-bottom: 80px;
5  padding-left: 5%;
6  padding-right: 5%;
7  background-color: #f7f7f7;
8  text-align: center;
9}
10
11.heading {
12  padding-top: 80px;
13  padding-bottom: 50px;
14  color: #5f5d60;
15}
16
17.heading h2 {
18  font-weight: normal;
19}
20
21.lesson {
22  float: left;
23  width: 25%;
24}
25
26.clear{
27  clear:left;
28}
29
30.lesson-icon {
31  position: relative;
32}
33
34.lesson-icon p {
35  position: absolute;
36  top: 44%;
37  width: 100%;
38  color: white;
39}