Zenn
🍨

floatによる回り込み

2021/05/30に公開
CSS
HTML
Scss
tech

floatとは...?

floatとは、あるブロックに対して、要素を横並びにするCSSプロパティです。
プロパティ値としては以下の3つがあります。

  • float: left;
    • 要素を左寄せにします。
  • float: right;
    • 要素を右寄せにします。
  • float: none;
    • 要素を寄せない(初期値)。
    • これは基本使用しない。

この説明だけではイメージがつきにくいと思いますので、実際にコードを書いてみましょう。

floatで国旗を作ってみよう！

具体例として、floatでベルギー🇧🇪の国旗を作ってみましょう。
※あくまでも例なので、国旗の正しい作り方とは言い切れないのでそこはご了承ください。

  • HTMLはbody部のみ記載。
  • CSSではなく、Sassを使用。(CSSとしてみてください)
index.html
<body>
    <div class="left-part"></div>
    <div class="center-part"></div>
    <div class="right-part"></div>
</body>
  • left-partは国旗の左の色の部分
  • center-partは国旗の真ん中の色の部分
  • right-partは国旗の右の色の部分
style.scss
@charset "utf-8";

body {
    margin-top: 20px;
    margin-left: 20px;
}

.left-part {
    width: 100px;
    height: 200px;
    background-color: rgb(0, 0, 0);
}

.center-part {
    width: 100px;
    height: 200px;
    background-color: rgb(250, 224, 66);
}

.right-part {
    width: 100px;
    height: 200px;
    background-color: rgb(237, 41, 57);
}
  • 国旗の横幅と縦の高さ、色を指定しているだけです。

イメージは以下です。

Scssファイルに、float: left:を追加します。
変更箇所のみ記載します。

style.scss
.left-part {
    width: 100px;
    height: 200px;
    background-color: rgb(0, 0, 0);

    // 追加箇所↓
    float: left;
}

.center-part {
    width: 100px;
    height: 200px;
    background-color: rgb(250, 224, 66);

    // 追加箇所↓
    float: left;
}

.right-part {
    width: 100px;
    height: 200px;
    background-color: rgb(237, 41, 57);

    // 追加箇所↓
    float: left;
}

イメージは以下です。

はい、出来上がりました。
各要素が横並びになり、左側に寄りましたね。

floatの注意点

例えばですが、「ベルギーの右部分(赤色)は回り込ませたくない」とします。
.right-partのfloatプロパティをコメントアウトしてみましょう。

style.scss
.right-part {
    width: 100px;
    height: 200px;
    background-color: rgb(237, 41, 57);

    // コメントアウト↓
    // float: left;
}

イメージは以下です。

..??? 赤はどこいった？？ってなりますよね。

これは.left-partや.center-partにfloatが指定されており、.right-partの回り込みが解除が効いていない状態となっています。
floatは単語の通り、「浮く」という意味で、画面の前面で表示されることになります。
そのため、赤はちょうど黒の背後に隠れています。

ある要素から、回り込みを解除したい時は、以下を用います。

  • clearプロパティ
  • clearfix

clearプロパティ

  • clearプロパティには、以下があります。
    • clear: left;
      • float: left;を解除します。
    • clear: right;
      • float: right;を解除します。
    • clear: both;
      • float: left; float: right;両方を解除します。

clear: both;を使っておくのが無難でしょう。

style.scss
.right-part {
    width: 100px;
    height: 200px;
    background-color: rgb(237, 41, 57);
    // float: left;

    // 追加箇所↓
    clear: both;
}

clearfix

イメージとしては、floatを適用させる要素を取り囲んだバリアを張るイメージです。

floatを適用させるタグを包含するように、divで囲みましょう。
class名のclearfixは特になんでも良いですが、慣習でclearfixとしています。
擬似要素の説明は割愛しますが、clearfix要素の後に透明なdiv要素を追加し、そのdiv要素にclear: both;を指定することで、それ以降の要素の回り込みを解除できます。

イメージは以下です。

ソースの変更点は以下です。

index.html
<body>
    <div class="clearfix">
        <div class="left-part"></div>
        <div class="center-part"></div>
    </div>
    <div class="right-part"></div>
</body>
style.scss
// 追加箇所↓
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.left-part {
    width: 100px;
    height: 200px;
    background-color: rgb(0, 0, 0);
    float: left;
}

.center-part {
    width: 100px;
    height: 200px;
    background-color: rgb(250, 224, 66);
    float: left;
}

.right-part {
    width: 100px;
    height: 200px;
    background-color: rgb(237, 41, 57);
    // float: left;
}

clear: both;、clearfixでも同様の動きになります。

floatではこんなこともできる

floatでは、以下のようなこともできます。

ソースは以下となります。

index.html
<body>
    <img src="images/cat.png" alt="猫">
    <p>テキストテキスト ... テキストテキスト</p>
</body>
  • テキストテキストは省略しています。
style.scss
body {
    margin-top: 20px;
    margin-left: 20px;
}

img {
    width: 200px;
    height: 200px;
    margin-right: 10px;
    float: left;
}

p {
    line-height: 1.5;
}

イメージは以下です。

まとめ

floatの考え方を具体例を交えて紹介しました。
floatで左右に要素を寄せることができますが、現在では、display: flex;というfloatの超上位互換がありますので、そちらを使うことをオススメします。

Discussion