floatのハマりポイント

web制作

改めてfloatを学び、自分が学習を始めた時にハマったところをoutput！

floatすると親が縮む

これはそもそも知らないと「えっ！？」ってなります。
僕もprogateやら本やらで勉強したつもりでしたが全然わかっていませんでした。
floatはただ要素を浮かせて後続の要素を横に持ってくる。みたいな認識しかなかったので、背景色を設定できない親要素に「なんでやっ！」ってなった気がします。

boxA
boxB

HTML

<div class="box">
   <div class="boxa">boxA</div>
   <div class="boxb">boxB</div>
</div>

CSS

    .box{
      background:orange;
    }
    .boxa{
      background:lightblue;
      width:100px;
      height:100px;
    }
    .boxb{
      background:lightgreen;
      width:100px;
      height:100px;
    }

この図のboxAとboxBに float:left; をかけると↓のようになります。

boxA
boxB

クラスbox（オレンジの領域）が消えました。
これはオレンジの中にあったboxAとboxBに float:left; を付けて浮かせた状態にしたからです。
そうすると親要素のオレンジは子要素がなくなったと思い、高さを無くします。その結果オレンジが見えなくなるのです。
これを解除する方法はこちらです「floatの解除方法」

文字だけ回り込む

画像の隣にテキストを入れるようなレイアウトはよく使うと思います。
僕もこれをやったとき上手くレイアウト調整が出来なかったときがありハマりました。
下の円は画像です。テキストを画像の右に回り込ませます。

これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。

HTML

<div class="box">
    <img src="circle.gif">
    <p>これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。</p>
</div>

CSS

  .box{
    background-color:orange;
  }
  img{
    width:150px;
    height:150px;
  }
  p{
    background-color:pink;
  }

まずimgタグだけに float:left; を付けます。

これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。

一見上手くいきましたが、よく見ると画像の下にp要素（ピンク）の領域が広がっています。
ここがハマりポイントでした。。
僕の場合テキストだけが回り込む事を知らなかったので、画像とテキストの間を空けようと思いp要素にmargin-leftを付けたのですが思い通りに行かずハマりました。
この場合imgタグにmargin-rightを付けるか、p要素にもfloatを付けてp要素に対してmargin-leftで余白を付けると画像とテキストの間に余白を入れることが出来ます。
片方にだけfloatを設定するとテキストだけが回り込む事を知っておくのが大事だと思います。

まとめ

  • floatすると外側の親要素の高さが無くなる。
  • floatするとテキストは回り込むが、領域はfloatした要素の下に存在する。

基本的に初心者は理解しないでとにかく手を動かす。みたいな事が言われています。確かに全体像を知るまで全て理解しようとしたらいつまでも物を作ることが出来ません。ですが何も考えないで進んでも身につかないような気がします。少しだけ立ち止まって理解しようとする気持ちも必要な気がしました(・∀・)

コメント