上の要素に内包されているはずの要素が下の要素に内包されてしまう

プログラミングスクールの課題で、webサイトを作成している所なのですが、下記のコードにおいて、「header」要素に含まれているはずの「ul」要素が下のdivのクラス「mainView」に内包されている形となっており、「header」に「border-bottom」を適用したのですが、「ul」の上に線が引かれてしまいます。
ご回答くださる方いらっしゃいましたら、教えて頂けると幸いです...

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>CookCamp</title>
6        <link rel="stylesheet" href="cookcamp.css">
7    </head>
8    <body>
9        <div class="wrapper">
10            <header class="header_contents">
11                <img src="images/structure/logo.png" class="header_image">
12                <form action="#" class="top_form">
13                    <input type="text" name="recipe" placeholder="料理名・食材名で検索">
14                    <input type="submit" value="レシピ検索">
15                </form>
16                <p class="top_sentense">誰でも作れる簡単料理レシピ掲載サイト</p> 
17                
18                <ul class="header_list">
19                    <li><a href="#">新着レシピ</a></li>
20                    <li><a href="#">料理から検索</a></li>
21                    <li><a href="#">食材から検索</a></li>
22                    <li><a href="#">旬の料理特集</a></li>
23                    <li><a href="#">ランキング</a></li>
24                </ul>
25            </header>
26            
27            <div class="mainView">
28                <img src="images/contents/mainView.jpg" alt="main画像" class="main_imge" >
29            </div>
30            
31            
32        </div>
33    </body>
34</html>

CSS
1div, nav,a,body,p,ul,li{
2    margin:0;
3    padding:0;
4}
5.header_contents{
6     width:960px;
7     margin:0 auto;
8     border-bottom:solid 1px #BBBBBB;
9}
10
11.header_image{
12     float:left;
13}
14.top_form{
15     float:right;
16}
17.top_sentense{
18     color:#664433;
19     clear:both;
20}
21.header_contents ul{
22     list-style:none;
23}
24.header_contents ul li {
25     float:left;
26     border-left:solid 1px #BBBBBB;
27     box-sizing:border-box;
28     width:20%;
29     text-align:center;
30     
31}
32
33.header_contents ul li:first-child{
34     border-left:none;
35}
36.header_contents ul li a{
37     text-decoration:none;
38     color:#664433;
39}
40.header_contents ul li a:hover{
41     color:#FF6633;
42}
43
44.mainView{
45     width:960px;
46     margin:0 auto;
47}
48.main_imge{
49     width:960px;
50}
51
52div, nav,a,body,p,ul,li{
53    margin:0;
54    padding:0;
55}
56.header_contents{
57     width:960px;
58     margin:0 auto;
59     border-bottom:solid 1px #BBBBBB;
60}
61
62.header_image{
63     float:left;
64}
65.top_form{
66     float:right;
67}
68.top_sentense{
69     color:#664433;
70     clear:both;
71}
72.header_contents ul{
73     list-style:none;
74}
75.header_contents ul li {
76     float:left;
77     border-left:solid 1px #BBBBBB;
78     box-sizing:border-box;
79     width:20%;
80     text-align:center;
81     
82}
83
84.header_contents ul li:first-child{
85     border-left:none;
86}
87.header_contents ul li a{
88     text-decoration:none;
89     color:#664433;
90}
91.header_contents ul li a:hover{
92     color:#FF6633;
93}
94
95.mainView{
96     width:960px;
97     margin:0 auto;
98}
99.main_imge{
100     width:960px;
101}
102
103

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

回答1件

ベストアンサー

floatしているものは、親要素の高さに加えられない場面があります。「clearfix」という方法を用いて、親要素をflotが収まるように処置する必要があります。

css
1.header_contents{
2  /* 中略 */
3  overflow: hidden;
4}

投稿2018/07/12 03:57

maisumakun

総合スコア145183

newyee

2018/07/12 07:16

ご回答頂き、ありがとうございます。clearfixを使いましたら、「ul」要素が「header」要素として認識されました。

newyee

2018/07/12 07:36

すみません。少し、clearfixのことについて調べてみたのですが、分からない部分がありお聞きしたいことがございます。今回の場合ですと、ul要素が高さを認識していないにも関わらず、下の「img」要素が「ul」要素にかぶる形で上には詰めていませんでした。なぜ、実際には高さが認識されていないにも関わらず、ul要素と被る形にはならなかったのでしょうか...?

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