floatタグの影響について

Question

HTMLとCSSの初期レベルの学習をしています。
例にならって簡単なHPのコードを書いているのですが、望まない箇所に
floatが適用されており原因がどうしてもわかりません。
具体的には、
下記の「 ** <h3 class="contact-submit">お問い合わせ</h3>**」
の見出しの「お問い合わせ」というワードがCSSで書いた「.contents-item」で
指定した「float : left;」に影響を受けて、実際のページの中上部の画像（img）の右に
並んでしまいます。画像の下に「お問い合わせ」を表示させたいのですが、原因が不明で
できません。原因と解決策をご教授いただけたらと思います。

実際に書いたコードは以下の通りです。

HTML🔽

        <h1>HALLO WORLD<span>.</span></h1>
        <h2>プログラミングの世界へようこそ</h2>
    </div>
    <div class="contents">
        <h3 class="section-title">学べるレッスン</h3>
        <div class="contents-item">
            <img src="girl.jpg" alt="">
            <p>HTML&CSS</p>
        </div>
        <div class="contents-item">    
            <img src="paint.jpg" alt="">
            <p>PHP</p>
        </div>
        <div class="contents-item">    
            <img src="woman.jpg" alt="">
            <p>ruby</p>
        </div>
        <div class="contents-item">    
            <img src="people.jpg" alt="">
            <p>swift</p>
        </div>
    </div>   
    <div class="contact-form">
       ** <h3 class="contact-submit">お問い合わせ</h3>**
        <input type="submit" value="送信">
        <p>メールアドレス（必須）</p>
    </div>
</div>
<div class="hooter">
    <div class="hooter-logo">Progate</div>
    <div class="hooter-list">
        <ul>
            <li>会社概要</li>
            <li>採用</li>
            <li>お問い合わせ</li>
        </ul>
    </div>
</div>    

---

CSS🔽

.main {
height: 950px;
width: 800px;
}
.copy-container h1 {
font-size: 50px;
}
.copy-container h2 {
padding-bottom: 35px;
font-size: 30px;
}
.section-title {
border-bottom: 5px solid rgb(235, 229, 229);
margin-top: 10px;
padding-bottom: 10px;
font-size: 20px;
}
.contents-item {
float: left;
font-size: 13px;
}
img {
width: 180px;
height: 180px;
padding-left: 5px;
padding-right: 5px;
}
.contents-item p {
font-size: 15px;
padding-bottom: 50px;
}

Comments

[girlstalk]

上記CSSの中の「** <h3 class="contact-submit">お問い合わせ</h3>**」に含まれる「**」は気にしないでください💦太字にしようとしたら謝って入ってしまいましたm(_ _)m

[m.ts10806]

実際のコード以外は再現確認の際に邪魔になりますし、
質問は編集できますので調整してもらったらと。
CSSのほうもマークダウンのcode適用しておいてください。

Answer 1

近年floatデザインは廃れてますけどね

.contact-form{
clear:left;
}

Comments

[girlstalk]

ご回答ありがとうございます。
改善しました。
>近年floatデザインは廃れてますけどね
→おそらく意図されていることとしては、floatタグは
最近、当初のルール通り正しくコードを入力しても、
コード通りに機能しないといったことが起こる事象が
あるということかと思います。
今回そういった際に対応する方法があると知ることが
できました。感謝いたします🙇‍♂️