【勉強する必要ある？】Floatの使い方

こんにちは。今日は、もう勉強する必要なし？？【Float】について分かりやすく解説しようと思います！

結論だけ先に言うと、現在でもFloatを勉強しておいた方がいいです！
なぜならFloatでしか実装できないレイアウトがあるからです。

以下少し雑談です↓

Floatといえば初学者がつまづき易いプロパティです。私も勉強し始めの時は何回か沼にはまりました(^^;

私がWebの勉強をし始めたのは3年くらい前なのですが、その時はまだ職業訓練校でがっつりFloatを習いました。
今はどうなんでしょうか？少しは解説してるんですかね(°▽°)
がっつりとは言っても今後はFlexを使っていくと良いと当時先生も言っていましたね。（少しFlexの解説もありました）

横並びレイアウトで、正直今ではFlexしか使いません！笑（Floatは使い方にクセがあるので）
ではもう勉強しなくて良いのでは・・・？と思われるかもしれません。

しかし！冒頭でも言いましたが今でもFloatでしか実装できないレイアウトがあるので、結論はやはり理解はしておいた方がいいです！

ちなみに、Floatでしか実装できないレイアウトとは、文字が画像を避けて回りこむレイアウトです↓

PCではあまり見かけませんがSPデザインで、社長メッセージのページ（社長の写真・テキスト）などでたま〜に見かけました！

最初にFloatの基本的な使い方を解説して、次に上のレイアウトのコードを解説します。
では見ていきましょう〜！

Floatの基本的な使い方

使う場面

要素を横並びにしたいとき、文字を回り込ませたいときなど。
Flexと違うのは、Floatという名前の通り、要素は浮いた状態になるという点です。

これがやっかいで、背景色が無くなったり思った通りのレイアウトにならないことがあります(＞＜)

値

Floatプロパティの値は

• left：要素を左寄せする
• right：要素を右寄せする
• none：指定しない（初期値）

です！

noneの使いどきですが、PC ・SPレイアウトで片方では解除したいときなどに使います。

使い方

まず、基本的な横並びのレイアウトの方法・注意点を実際にコードを見ながら確認していきましょ〜！

HTML編

        <div class="l-contWrap">
          <div class="l-main">
            <p>メインテキストが入ります。メインテキストが入ります。メインテキストが入ります。メインテキストが入ります。メインテキストが入ります。メインテキストが入ります。メインテキストが入ります。メインテキストが入ります。メインテキストが入ります。メインテキストが入ります。メインテキストが入ります。メインテキストが入ります。メインテキストが入ります。メインテキストが入ります。</p>
          </div>
          <div class="l-side">
            <p>サイドテキストが入ります。サイドテキストが入ります。サイドテキストが入ります。サイドテキストが入ります。サイドテキストが入ります。サイドテキストが入ります。サイドテキストが入ります。サイドテキストが入ります。サイドテキストが入ります。サイドテキストが入ります。</p>
          </div>
          <div class="l-footer">
            <p>フッターテキストが入ります。フッターテキストが入ります。フッターテキストが入ります。フッターテキストが入ります。フッターテキストが入ります。フッターテキストが入ります。フッターテキストが入ります。フッターテキストが入ります。フッターテキストが入ります。</p>
          </div>
        </div>

今回は大雑把にHTMLを組んでいます！
【l-contWrap】という親要素の中に【l-main】・【l-side】・【l-footer】の3つの子要素があります。

【l-main】・【l-side】を横並びにして、その下に【l-footer】を置きたいと思います！

ブラウザ上ではこんな感じです（分かり易いように背景色をつけました）↓

CSS編

.l-contWrap {
  overflow: hidden;//直接の親要素に指定
  margin: 0 auto;
  max-width: 1000px;
}

.l-main,
.l-side,
.l-footer {
  padding: 15px;
}

.l-main {
  float: left;
  width: 70%;
  box-sizing: border-box;//余白(padding)込みの幅にするため

  background-color: #fcf5f7;
}

.l-side {
  float: right;
  width: 30%;
  box-sizing: border-box;//余白(padding)込みの幅にするため

  background-color: #e6f5eb;
}

.l-footer {
  clear: both;//横並びさせる要素の下の要素につける
  
  background-color: #ebfaff;
}

重要ポイント！！

ポイントは3つです！！

これはもうFloatを使う際のルールとして覚えるしかありません(°_°)

clearプロパティについて

いきなりclearというプロパティが出てきましたが、名前の通り「clear＝解除」という意味でFloatによって発生する回り込みの解除をしてくれます。Floatとセットで覚えると◎

必ずFloatを指定した要素の下の要素に指定します。（回り込みを解除したい場合）

使う値はleft・right・bothとありますが両方を意味するbothを指定しておけば、どの場合にも対応してくれるので大体bothを使います＾＾

よくハマる沼の例

下の要素の領域が回り込んでくる

重要ポイントであげた（3）に当たりますが、【l-footer】にclearを指定しない場合【l-footer】の領域が浮いた空間に入りこんでしまいます↓

これはFloatした要素は浮いているからです(＞＜)

.l-side:after {
  display: block;
  clear: both;
  content: '';
}

と、ここまでFloatの横並びレイアウトについて書きましたが、通常の横並びレイアウトではFlexを使った方が簡単なので「そーなんだー」くらいに理解しておくといいです＾＾

文字が画像の周りを回りこむレイアウト

では基本的な使い方を見てきたので、今度は文字が画像に回りこむレイアウトのコードを見ていきましょう〜！

HTML編

        <section class="contSect">
          <div class="sectInner">
            <figure class="thumb"><img src="assets/images/cont_img01.png" alt=""></figure>
            <div class="txtBlock">
              <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
          </div>
        </section>
        <!-- ./contSect -->

CSS編

.contSect .sectInner {
  overflow: hidden;
  max-width: 600px;
  margin: 0 auto;
}

.contSect .thumb {
  float: right;
  width: 30%;
  margin: 0 0 15px 15px;
}

今回の場合【txtBlock】には特に何も指定しません。

ポイントはHTML上で画像、テキストの順に配置して画像に【float: right;】を指定することです！
順番を逆にするとうまくいきません(＞＜)

と、順番の重要性を書きましたが私もどっちが上か覚えていないのでその都度調べています笑

まとめ

時間があったのでFloatについて詳しめに書いてみました！
少しでも参考になれば幸いです＾＾

では今日はここまで！