footerが上にせり上がる

タイトルの通りです　「footer　上に上がる」などで検索して調べましたが、それはコンテンツが少ないときにフッターが一緒にせり上がるという状況の解説ばかりでした
自分の場合はフッターだけ上に上がってサイトの上の方に覆いかぶさっているという感じです

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>モッシャマ.....</title>
6    <link rel="stylesheet" href="css2/reset.css">
7    <link rel="stylesheet" href="css2/style2.css">
8  </head>
9  <body>
10    <header>
11     <h1 class="header-logo">
12      <a href="/">SAMPLE SITE</a>
13     </h1>
14
15     <nav class="global-nav">
16      <ul>
17        <li class="nav-item home"><a href="#">HOME</a></li>
18        <li class="nav-item"><a href="#">ABOUT</a></li>
19        <li class="nav-item"><a href="#">NEWS</a></li>
20        <li class="nav-item"><a href="#">TOPICS</a></li>
21        <li class="nav-item"><a href="#">DOCS</a></li>
22        <li class="nav-item"><a href="#">BLOG</a></li>
23      </ul>
24     </nav>
25    </header>
26
27    <div class="wrapper clear">
28      <main>
29        <h2 class="hidden">HOT TOPIC</h2>
30
31         <a href="#" class="hot-topic clear">
32          <img src="./images/hot-topic.jpg" alt="">
33          <div class="content">
34           <h2 class="title">実務で使えるHTML/CSS<br>モダンコーディング</h2>
35           <p class="desc">Webフロントエンドの進化の勢いはとどまるところ
36            を知りません。新しい要素が増えて大幅に表現力
37            が広がったHTML5/CSS3を活用して...</p>
38            <time class="date" datetime="2020-12-29">2020.12.29 TUE</time>
39          </div>
40        </a>
41
42        <h2 class="newstitle">NEWS</h2>
43        <ul class="newslist">
44         <li class="newsitem">
45           <a href="#"> <time datetime="2020-12-30">2020.12.30 WED</time>
46           <span class="news">NEWS</span>
47           <span class="newsp">WORKSを更新しました</span>
48           </a>
49         </li>
50
51         <li class="newsitem">
52          <a href="#"><time datetime="2020-12-30">2020.12.30 WED</time>
53           <span class="topic">TOPIC</span>
54           <span class="newsp">CSSでここまでできる！？ ホントに使えるCSSセレクタ10選</span>
55          </a>
56         </li>
57
58         <li class="newsitem">
59           <a href="#"> <time datetime="2020-12-30">2020.12.30 WED</time>
60           <span class="news">NEWS</span>
61           <span class="newsp">TOPICSを更新しました</span>
62           </a>
63         </li>
64
65         <li class="newsitem">
66          <a href="#"><time datetime="2020-12-30">2020.12.30 WED</time>
67           <span class="topic">TOPIC</span>
68           <span class="newsp">HTML/CSSコーディングと切っても切れないWEBブラウザのシェア動向をチェック</span>
69          </a>
70         </li>
71
72         <li class="newsitem">
73          <a href="#"><time datetime="2020-12-30">2020.12.30 WED</time>
74           <span class="topic">TOPIC</span>
75           <span class="newsp">HTML5の新しい属性で手軽にフォームバリデーション</span>
76          </a>
77         </li>
78
79         <li class="newsitem">
80           <a href="#"> <time datetime="2020-12-30">2020.12.30 WED</time>
81           <span class="news">NEWS</span>
82           <span class="newsp">WORKSを更新しました</span>
83           </a>
84         </li>
85        </ul>
86
87       <h2 class="hidden">ARTICLES</h2>
88       <div class="articles clear">
89         <a class="article" href="#">
90           <img class="article-img" src="./images/article.jpg">
91           <h3 class="article-title">実務で使えるHTML/CSSモダンコーディングTIPS</h3>
92           <p class="article-p">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、
93           モダンなコーディングにチャレンジしましょう！</p>
94           <time class="article-date" date-time="2021-01-01">2021.01.01 FRI</time>
95         </a>
96         <a class="article" href="#">
97           <img class="article-img" src="./images/article.jpg">
98           <h3 class="article-title">実務で使えるHTML/CSSモダンコーディングTIPS</h3>
99           <p class="article-p">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、
100           モダンなコーディングにチャレンジしましょう！</p>
101           <time class="article-date" date-time="2021-01-01">2021.01.01 FRI</time>
102         </a>
103         <a class="article" href="#">
104           <img class="article-img" src="./images/article.jpg">
105           <h3 class="article-title">実務で使えるHTML/CSSモダンコーディングTIPS</h3>
106           <p class="article-p">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、
107           モダンなコーディングにチャレンジしましょう！</p>
108           <time class="article-date" date-time="2021-01-01">2021.01.01 FRI</time>
109
110         </a>
111         <a class="article" href="#">
112           <img class="article-img" src="./images/article.jpg">
113           <h3 class="article-title">実務で使えるHTML/CSSモダンコーディングTIPS</h3>
114           <p class="article-p">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、
115           モダンなコーディングにチャレンジしましょう！</p>
116           <time class="article-date" date-time="2021-01-01">2021.01.01 FRI</time>
117         </a>
118       </div>
119
120     </main>
121      
122    </div>
123
124    <footer class="footer">
125    </footer>
126
127
128  </body>
129</html>
130
131

CSS
1*{box-sizing: border-box;}
2html{font-size: 62.5%;}
3body{color: #333;
4font-size: 1.2rem;
5font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
6}
7
8  a:link,a:visited,a:hover,a:active{
9color:#d03c56;
10text-decoration: none;
11}
12
13
14header{
15width:100%;
16background:url("../images/bg-header.gif") repeat-x;
17box-shadow:0px 2px #efeded;
18height:140px;
19padding-top:30px;
20}
21.header-logo{background:url("../images/logo.png") no-repeat;
22width:225px;
23height:55px;
24margin:0 auto;
25}
26
27.header-logo a{
28display:block;
29width:100%;
30height:100%;
31text-indent: 100%;
32white-space: nowrap;
33overflow:hidden;
34}
35
36
37.global-nav{text-align:center;
38}
39
40.nav-item {display:inline-block;
41}
42
43.nav-item a{
44  display: inline-block;
45width: 100px;
46margin:10px 15px;
47height: 30px;
48line-height: 30px;
49border-radius: 7px;
50letter-spacing:1px;
51transition: 0.15s;
52color:#666;}
53
54.home a,.nav-item a:hover{background-color:#D03C56;
55color:white;
56}
57
58.wrapper{
59width:970px;
60margin:30px auto 40px;
61}
62
63.hot-topic{display: block;
64height:300px;
65transition: 0.85s;
66margin-bottom:30px;
67}
68
69.hot-topic img{float:left;
70height:100%; width:50%;
71
72}
73.content{float:right;
74background-color: #2D3D54;
75height:100%; width:50%;
76line-height: 1.6;
77color:white;
78padding:105px 25px 0px;
79position: relative;
80}
81
82.title{font-size:20px;
83  font-weight: normal;
84}
85.date{position: absolute;
86background-color: white;
87padding:4px; color:#2d3d54;
88font-weight: bold;
89width:140px;
90text-align: center;
91line-height: 1;
92top:60px;
93left:0px;
94}
95
96.desc{color:#ddc;}
97.hot-topic:hover{opacity:0.8;}
98
99.newstitle{font-size:15px;
100background:url("../images/bg-slash.gif");
101padding:10px 15px;
102height:40px;
103}
104
105.newslist{list-style: none; max-height: 220px;
106overflow-y: auto; margin-bottom: 30px;
107}
108
109.newsitem a{display: block; height: 35px;
110transition:0.85s; padding:10px 15px; font-size: 0px;
111}
112
113.newsitem time{font-weight: bold; color:black; display:inline-block;
114  width:19%; font-size: 1rem;
115}
116
117
118.newsitem:nth-of-type(even) a{background:url("../images/bg-slash.gif")}
119.newsitem a:hover{background-color:#fafaf8;}
120.news,.topic{width:8%;  display:inline-block; font-size: 1rem; color:#fff;
121text-align: center; border-radius: 5px; line-height:16px; }
122.news{background-color: #2c3c53;} .topic{background-color: #d03c56;}
123.newsp{ display:inline-block; color:black;  width:73%;  font-size: 1.2rem;
124padding-left: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
125
126.article{display: block; width:315px;height:360px; margin-bottom: 30px;
127box-shadow:3px 3px 6px -4px rgba(0,0,0,0.15);
128transition: 0.15s; position: relative;
129}
130.article:hover{opacity: 0.8;}
131.article:nth-of-type(odd){float:left;}
132.article:nth-of-type(even){float:right;}
133.article-title{font-size: 1.5rem; line-height: 1.5; margin-top:30px;
134color:#555; }
135.article-p{text-overflow:ellipsis;
136overflow:hidden; white-space:nowrap; margin-top:5px;
137color:#333;}
138.article-date{display:block; text-align: center;
139  background-color:#b5d264; font-weight:bold;
140 width:160px; padding:4px;
141 position:absolute;
142 right:0px; bottom:15px;
143color:#2d3d54;
144}
145
146
147
148main{
149  display: block;
150  width: 660px;
151  float:left;
152}
153.sidemenu{
154  width:275px;
155  float:right;
156}
157.clear{clear: both;}
158.footer{width:100%; height:100px; background-color: #2D3D54;}
159.hidden{display:none;}
160

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

回答1件

ベストアンサー

main に対して、float:left;を設定しているのが原因ですね。
floatを設定する浮いた状態になるので、他の要素は裏にせりあがります。

.clear{clear: both;} でfloatを解除したつもりなんでしょうが、この設定は無意味です。

よく使われるのは、下記のように疑似要素に clear を設定する方法です。

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

現在では floatでレイアウトを決めるのは古いです。Flexbox を使うのが主流です。あるいは CSS Grid というのもあります。この辺の学習をされることをお勧めします。

Flexbox を使った場合のコード例

html
1<header>
2  header
3</header>
4<div class="wrapper">
5  <main>
6    main
7  </main>
8  <aside>
9    sidemenu
10  </aside>
11</div>
12<footer>
13  footer
14</footer>

css
1header {
2  width:100%;
3  height:100px;
4  background-color: gray;
5}
6.wrapper {
7  display: flex;
8  max-width: 970px;
9  margin: 30px auto;
10}
11main {
12  flex: 1;
13  background-color: aqua;
14  height: 400px;
15}
16aside {
17  width:275px;
18  background-color: pink;  
19}
20footer{
21  width:100%;
22  height:100px;
23  background-color: #2D3D54;
24}

投稿2021/01/06 04:36

編集2021/01/06 13:03

hatena19

総合スコア34075

syo--

2021/01/06 06:09

ありがとうございます　無事にフッターが下に落ち付きました .clear{clear: both;}で効かなかった理由は　https://web-manabu.com/html-css39/ このサイトのclear bothのデメリットの部分にある「すべての子要素がfloatしているから」でしょうか？

hatena19

2021/01/06 13:03 編集

ちょっと違うかな。 floatした要素の後の要素にclear: both;を設定する必要があるので、親に clear: both; しても無意味だということです。そのため、.clear::after で疑似要素を子要素の後に追加して、それにclear: both;を設定してます。 Flexを使えばそのような面倒なことを考えずにレイアウトできます。回答にコード例を追記しておきましたので参考にしてください。

syo--

2021/01/07 12:28

ご丁寧にありがとうございます！凄く助かりました　これからはflexboxを学んでいこうと思います！

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