初初初心者からのプログラミング入門③ CSS float:left;を使うとデザインが崩壊する仕組みと治し方
超初心者がプログラミングの勉強始めました
プロゲートでコツコツ手を動かしてみています。
Progat(プロゲート)で、なぜかデザインがおかしい→犯人は float:left
フッターが、見本とは違い、画像にめり込んでしまう不思議・・!!
確認すると、CSSに間違いがあるようでした。
HTML---------------
<div class="contents">
<h3 class="section-title">学べるレッスン</h3>
<div class="contents-item">
<img src="https://">
<p>HTML & CSS</p>
</div>
<div class="contents-item">
<img src="https://">
<p>PHP</p>
</div>
</div>
</div>
ーーーーーーーーーーーーーーー
CSS(間違い)---------------
.contents-item{
float:left;
height:500px;
}
.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}
---------------
CSS(プロゲートでの正解)---------------
.contents{
height:500px;
}
.contents-item{
float:left;
}
.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}
---------------
でも、なんで、
<div class="contents">にfloat:left;をするのが良くて
<div class="contents-item"> にfloat:left;をするとフッターがめり込んでしまうのか、よくわかりません。
float:left;の効果は、ただ左に揃えるだけじゃない
float:left;を使うと、どうやらその効果がそれ以降の指定もしていない<div>まで影響が出るっぽい。
(左上に揃えた後に出来た、右の余白に、他のデータが収納されてしまうようです)
それを防ぐには、巻き込まれたくないブロックに、clear: left;という指定をあえてする必要がある、という事でした。
以下の書き方で、フッターがめり込まなくなりました!!
CSS(調べて修正)---------------
.contents-item{
float:left;
height:500px;
}
.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
clear: left;
}
ーーーーーーーーーーーーーーー
それでも残る float:left; の謎
でもやっぱり、
CSS(間違え)---------------
.contents-item{
float:left;
height:500px;
}
---------------
だと、高さが500px取れずフッターがめり込んでしまうのに、
CSS(Progatでの正解)---------------
.contents{
height:500px;
}
.contents-item{
float:left;
}
---------------
だと高さが500px取れるのかは、意味が分からないままです。
float:left; 動き方がよくわからないぜ・・・!