【超初心者向け】floatの考え方

cssのfloatについて個人的な意見をまとめてみました。恐らく初心者の方でここの考え方につまずく方は少なからずいるのではないでしょうか？
レスポンシブ対応で結構使う事が多いのでここでしっかり不安を解消しましょう。

なかなか文字だけだと分かりづらいかと思うので実際に手を動かしながら、動作を確認しながら理解していきましょう。

準備

html,cssを用意し以下をコピペします。

html

<div class="first">
  <h4>floatを当てる要素</h4>
  <img src="./assets/img/image_1.jpeg" alt="">
  <p>テキスト</p>
</div>
<div class="second">
  <h4>後続の要素</h4>
  <img src="./assets/img/image_2.jpeg" alt="">
  <p>テキスト</p>
</div>

css

*{
  margin: 0;
}

div{
  margin-left: 30px;
  padding: 20px;
  width: 300px;
}

div > img{
  width: 200px;
}

div > p{
  background-color:gray;
  padding: 20px;
}

.first{
  background-color: green;
}

.second{
  background-color: yellow;
}

ブラウザで確認すると以下のようになります。

ブラウザにて確認が出来たら、今回の目的を確認します。
以下の画像のように、画像の右にテキストを配置するのが目的です。

追加

準備と目的が確認できたので、実際に横並びをしていきます。
今回は.firstクラスのimgタグに対してfloat:left;を追加します。

css(追加分のみ記載)

.first img{
  float: left;
}

コードが追加できたらブラウザで確認しましょう。

テキストは確かに横並びにできましたが、なにやら後続の要素が上の要素にめり込んできました。ついでにタイトルのレイアウトもぐちゃぐちゃです！これはプチパニックですねｗ

ただ、これはfloatによるものです。

そもそもfloatって

floatつまり”浮く”という意味なのですが、もう読んで字の如くのことが起きています。
今回は理解しやすいように書くセッションごとに色分けをしました。

実は横並びしたと見せかけて、元あったグレーのテキスト要素が裏に回っています。
floatを当てた画像は”浮いている”ので、前から立体的に”画像”→”テキスト”と並んでいるだけです。

ただし、これがfloatの混乱の原因の１つでもあるのですが、後ろに回った要素の文字だけがうまいこと横並びになっています。

そしてもう１つ注意しなければならないのはfloatを当てた要素は”高さの概念がなくなる”ということです。実際に画像を見てみると、グレーのテキストの要素に合わせて緑の要素の”高さ”が整形されていることがわかります。（以下参照）

正確には”高さの概念がなくなった”訳ではなく、単純に前面に要素が押し出されたので要素の高さが計算されなくなっただけです。

なのでこれを解消するために、”後続の要素”に以下のcssを当てましょう。

css(追加分のみ記載)

.second{
  clear: both;
}

★floatを使う上で必ず使うCSSです。きっちりその役目と当てる場所を覚えておきましょう。

ブラウザを確認すると”後続の要素”のレイアウトの崩れは直りました。さらにfloatを当てた画像に後続の要素がぴったりと並びました。

ただし相変わらず緑の要素に関しては画像分の高さが計算されていません。なので緑の要素に対して帳尻を合わせるよう、passingを当てましょう。

css(追加分のみ記載)

.first{
  padding-bottom: 70px;
}

これで完成です。最後にfloat:right;も使用した完成形コードを載せますのでしっかり読み込んでfloatをものにしましょう。

完成形コード

html

<div class="first">
  <h4>floatを当てる要素</h4>
  <img src="./assets/img/image_1.jpeg" alt="">
  <p>テキスト</p>
</div>
<div class="second">
  <h4>後続の要素</h4>
  <img src="./assets/img/image_2.jpeg" alt="">
  <p>テキスト</p>
</div>

css

*{
  margin: 0;
}

div{
  margin-left: 30px;
  padding: 20px;
  width: 300px;
}

div > img{
  width: 200px;
}

div > p{
  background-color:gray;
  padding: 20px;
}

.first{
  background-color: green;
  padding-bottom: 70px;
}

.first img{
  float: left;
}

.second{
  background-color: yellow;
  clear: both;
  padding-bottom: 80px;
}

.second img{
  float: right;
}

おまけ

float:left;を使用した場合には、clear:left;を使います。同じくfloat:right;を使用した場合には、clear:right;を使います。

ですが基本的に何か特別な理由がない限りはclear:both;を使います。clear:both;であればfloat:left; float:right;のどちらにも対応できるからです。

好みや、現場のルールなどがあるので適宜対応できるようにしていきましょう。