footerがmainの後ろに潜ってしまう。

前提・実現したいこと

先日HTMLの勉強を始めた者です、勉強しながら練習程度にHTMLを書いているのですが問題点がわからないので質問させていただきます。

ヘッダー、メイン、フッタ。と分けて書いているはずがどうしてもメインの画像にフッタが（後ろに）被ってしまいます。
初心者の私があれこれ可能性を述べても野暮だと思うので、是非にソースコードを見ていただいて問題点を教えていただけると幸いです...

画像は250×250（px）です

HTML5とCSS3というのもよくわかっていません...

場違いでしたら申し訳ございません...

発生している問題

フッターがメインコンテンツの画像の後ろに被ってしまう。

問題のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>練習</title>
6    <link rel="stylesheet" href="stylesheet2.css">
7  </head>
8
9  <body>
10     <!--ヘッダー開始-->
11    <div class="header">
12        <div class="header-logo">ヘッダーロゴ</div>
13        <div class="header-list">
14          <ul>
15            <li>1</li>
16            <li>2</li>
17          </ul>
18        </div>
19      </div>
20      <!--ヘッダー終了-->
21
22      <!--メイン開始-->
23      <div class="main">
24        <h3>見出し</h3>
25        <ul>
26          <li>１</li>
27          <li>２</li>
28          <li><span>３</span></li>
29        </ul>
30
31        <div class="contents">
32          <h3>コンテンツ</h3>
33          <div class="contents-item">
34            <img src="1.png" alt="">
35            <p>1</p>
36          </div>
37
38          <div class="contents-item">
39            <img src="2.png" alt="">
40            <p>2</p>
41          </div>
42
43          <div class="contents-item">
44            <img src="3.png" alt="">
45            <p>3</p>
46          </div>
47        </div>
48      </div>
49      <!--メイン終了-->
50
51      <!--フッタ開始-->
52      <div class="footer">
53        <div class="footer-logo">フッタロゴ</div>
54        <div class="footer-list">
55          <ul>
56            <li>1</li>
57            <li>2</li>
58          </ul>
59        </div>
60
61      </div>
62      <!--フッタ終了-->
63  </body>
64</html>
65

css
1.header {
2  height:90px;
3  background-color: #000000;
4}
5
6.header-logo {
7  color: #fff;
8  font-size: 36px;
9  float: left;
10  padding: 20px 40px;
11}
12
13.header-list li {
14  color: #fff;
15  list-style: none;
16  float: left;
17  padding: 33px 20px
18}
19
20.main {
21  padding-bottom: 60px;
22}
23
24.main span {
25  color: #ff0000;
26}
27
28.contents h3 {
29  border-bottom: 2px solid #dee7ec;
30}
31
32.contents-item {
33  float: left;
34  margin-right: 40px;
35}
36
37.footer {
38  height: 100px;
39  background-color: #000000;
40  color: #fff;
41}
42
43.footer-logo {
44  padding: 35px 5px;
45  float: left;
46}
47
48.footer-list {
49  float:right;
50  list-style: none;
51  padding: ;
52}
53

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

回答2件

ベストアンサー

floatを使ってレイアウトを調整するのはかなり苦行なのでflexboxかgridに移行することを検討されたほうがよいです。
.contents-item に指定されている float: left が悪さをしています。

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>練習</title>
6    <link rel="stylesheet" href="stylesheet2.css">
7  </head>
8
9  <body>
10     <!--ヘッダー開始-->
11    <div class="header">
12        <div class="header-logo">ヘッダーロゴ</div>
13        <div class="header-list">
14          <ul>
15            <li>1</li>
16            <li>2</li>
17          </ul>
18        </div>
19      </div>
20      <!--ヘッダー終了-->
21
22      <!--メイン開始-->
23      <div class="main">
24        <h3>見出し</h3>
25        <ul>
26          <li>１</li>
27          <li>２</li>
28          <li><span>３</span></li>
29        </ul>
30
31        <div class="contents">
32          <h3>コンテンツ</h3>
33          <div class="content-items"> <!-- 追加 -->
34            <div class="contents-item">
35              <img src="1.png" alt="">
36              <p>1</p>
37            </div>
38
39            <div class="contents-item">
40              <img src="2.png" alt="">
41              <p>2</p>
42            </div>
43
44            <div class="contents-item">
45              <img src="3.png" alt="">
46              <p>3</p>
47            </div>
48          </div>
49        </div>
50      </div>
51      <!--メイン終了-->
52
53      <!--フッタ開始-->
54      <div class="footer">
55        <div class="footer-logo">フッタロゴ</div>
56        <div class="footer-list">
57          <ul>
58            <li>1</li>
59            <li>2</li>
60          </ul>
61        </div>
62
63      </div>
64      <!--フッタ終了-->
65  </body>
66</html>

css
1/* for debugging ------ */
2.contents-item > img {
3  min-height: 250px;
4  min-width: 250px;
5  border: 1px solid red;
6}
7/* -------------------- */
8
9.header, .footer {
10  color: #fff;
11  background-color: #000;
12  display: flex;
13}
14.header { height:  90px; }
15.footer { height: 100px; }
16
17.header-logo {
18  font-size: 36px;
19  padding: 20px 40px;
20}
21.footer-logo {
22  padding: 35px 5px;
23}
24
25.header-list > ul,
26.footer-list > ul {
27  display: flex;
28  color: #fff;
29  list-style: none;
30}
31.header-list li {
32  padding: 33px 20px
33}
34
35
36.main {
37  padding-bottom: 60px;
38}
39.main span {
40  color: #f00;
41}
42
43.contents h3 {
44  border-bottom: 2px solid #dee7ec;
45}
46.content-items {
47  display: flex;
48}
49.contents-item {
50  margin-right: 40px;
51}