【HTML&CSS】float:leftした<div>のあと、次の文が右に表示されます。なぜか教えてほしいです。

発生している問題・エラーメッセージ

<div class="contact-form">の文章が、右側に表示される

HTML
1<!doctype html>
2<html lang="ja">
3  <head>
4    <link rel="stylesheet" href="stylesheet.css">
5      <meta charset="UTF-8">
6      <title>Hurozuki.Blog</title>
7      <meta name="description" content="お金、ブログの知識を紹介します">
8  </head>
9
10  <body>
11
12    <header>
13      <div class="header-logo">
14        Progate
15      </div>
16<div class="header-list">
17  <ul>
18    <li>プロゲートとは</li>
19    <li>学べるレッスン</li>
20    <li>お問い合わせ</li>
21  </ul>
22</div>
23    </header>
24
25<div class="main">
26<div class="copy-container">
27  <h1>HELLO WORLD<span>.</span></h1>
28  <h2>プログラミングの世界へようこそ</h2>
29</div>
30
31<div class="contents">
32<div class="contents-item">
33  <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
34  <p>HTML&CSS</p>
35</div>
36<div class="contents-item">
37  <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
38  <p>PHP</p>
39</div>
40<div class="contents-item">
41  <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
42  <p>Ruby</p>
43</div>
44<div class="contents-item">
45  <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
46  <p>Swift</p>
47</div>
48</div>
49
50<div class="contact-form">
51<h2>お問い合わせ</h2>
52<p>メールアドレス</p>
53<p>名前</p>
54<p>お問い合わせ内容</p>
55</div>
56
57</div>
58
59<footer>
60  <div class="footer-logo">
61    Progate
62  </div>
63  <div class="footer-list">
64    <ul>
65      <li>お問い合わせ</li>
66      <li>会社概要</li>
67      <li>採用</li>
68    </ul>
69  </div>
70</footer>
71
72  </body>
73</html>

CSS
1
2
3
4header{
5  background-color:#3aacad;
6  color:white;
7height:90px
8}
9header li{
10  list-style: none;
11  float:left;
12  padding:30px 20px;
13}
14.header-logo{
15  float:left;
16  font-size:36px;
17  padding:20px 0 0 10px;
18}
19.main{
20  background-color:#eaf6fd;
21  height:3000px;
22}
23.copy-container h1{
24  font-size:100px;
25}
26span{
27  color:red;
28}
29.copy-container h2{
30padding:10px;
31border-bottom:2px solid black;
32margin-bottom:10px;
33}
34.contents-item{
35  float:left;
36  padding-left:10px;
37  padding:200px;
38}
39.contact-form{
40
41}
42footer{
43  background-color:#f5a500;
44  height:270px;
45  color:white;
46}
47.footer-logo{
48  font-size:40px;
49  
50}
51footer li{
52  list-style:none;
53  padding:10px;
54}
55.footer-list{
56  float:right;
57}
58

試したこと

Progateのコード確認
該当箇所をfloatしていないかの確認

補足情報（FW/ツールのバージョンなど）

Atomでやっています。

m.ts10806

2021/12/25 07:09

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

hurozuki

2021/12/25 08:06

了解しました。ありがとうございます。

m.ts10806

2021/12/25 08:09

質問は編集できます

hurozuki

2021/12/25 08:15

そうなんですね。ありがとうございます。編集します。

行動規範の内容に同意します

回答3件

他の方に回答にもあるように、float を clear で解除する必要があります。

よく使われる手法は crierfix ですね。

css
1.clearfix::after {
2  content: "";
3  clear: both;
4  display: block;
5}

html
1<div class="contents clearfix">
2   略
3</div>
4<div class="contact-form">
5  略

IE対応を考慮しなくてもいいなら、display: flow-root; を使うこともできます。

css
1.contents {
2  display: flow-root;
3}

display: flow-rootによるfloatの回り込み解除 | Free Style

ただ、floatを使って要素を横並びさせるのは10年前の手法です。
現在では、FlexboxかGridを使うのがいいでしょう。

投稿2021/12/25 08:08

hatena19

総合スコア34075

hurozuki

2021/12/25 08:14

なるほど。分かりやすく説明してくださり、本当にありがとうございます！助かります!(^^)!

行動規範の内容に同意します

ベストアンサー

contact-formのCSS内にclear:both;を追加して解決しないでしょうか？
floatした後は必ずclearする癖をつけると良いです。個人的には中身のない<div>要素にclear:both;をつけてブロックの区切りとして使うと、メンテナンスしやすくて気に入っています。

投稿2021/12/25 07:11