初初初心者からのプログラミング入門③ CSS float:left;を使うとデザインが崩壊する仕組みと治し方

超初心者がプログラミングの勉強始めました

 プロゲートでコツコツ手を動かしてみています。 

 

Progat(プロゲート)で、なぜかデザインがおかしい→犯人は float:left

フッターが、見本とは違い、画像にめり込んでしまう不思議・・!!

f:id:aoiao4042:20190908172425p:plain

確認すると、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;という指定をあえてする必要がある、という事でした。

udemy.benesse.co.jp

以下の書き方で、フッターがめり込まなくなりました!!

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; 動き方がよくわからないぜ・・・!