css
投稿日
投稿者 dennie

【CSS】float

float は要素を横並びに出来ますが、クセがものすごく強いです。

色々やってみて、動きを確認しましょう。

基本の横並び

2つの要素に対して float: left; を使用して要素を右に並べます。

HTML

<div class="left-box">ボックス1</div>
<div class="left-box">ボックス2</div>

CSS

.left-box {
  width: 100px;
  height: 100px;
  float: left;
  background-color: chartreuse;
  outline: solid;
}

結果

ボックス1
ボックス2

横並びを止める

横並びを止める方法はいくつかあります。動作確認の為、周りくどいやり方になりますが、以下の方法で横並びを止める方法を確認します。

要素の追加

任意のボックス要素を追加します。
この要素は横並びにさせたくないとします。なので、任意のボックス要素を float プロパティなしで追加します。
以後分かりやすいように、この要素を “Aテキスト” と呼称します。

HTML

<div class="left-box">ボックス1</div>
<div class="left-box">ボックス2</div>
<div class="box">A テキスト A テキスト</div>

CSS

.left-box {
  width: 100px;
  height: 100px;
  float: left;
  background-color: chartreuse;
  outline: solid;
}

.box {
  width: 250px;
  height: 200px;
  background-color: red;
  outline: solid;
}

結果

追加した要素が横並び要素の下に回り込んでいるように見受けられます。

ボックス1
ボックス2
A テキスト A テキスト

横並びを止める方法1

Aテキストに clear:both プロパティを追加すると float が解除されます。

HTML

<div class="left-box">ボックス1</div>
<div class="left-box">ボックス2</div>
<div class="box clear">A テキスト A テキスト</div>

CSS

.left-box {
  width: 100px;
  height: 100px;
  float: left;
  background-color: chartreuse;
  outline: solid;
}

.box {
  width: 250px;
  height: 200px;
  background-color: red;
  outline: solid;
}

.clear {
  clear: both;
}

結果

横並びがなくなりました。

ボックス1
ボックス2
A テキスト A テキスト

問題点

このままでは要素 “Aテキスト” はTOPマージンが取れません。 float要素は浮いた状態になる為です。なので、floatを止める為の空の要素を配置します。

HTML

<div class="left-box">ボックス1</div>
<div class="left-box">ボックス2</div>
<div class="clear"></div>
<div class="box">A テキスト A テキスト</div>

CSS

.left-box {
  width: 100px;
  height: 100px;
  float: left;
  background-color: chartreuse;
  outline: solid;
}

.box {
  margin-top: 10px;
  width: 250px;
  height: 200px;
  background-color: red;
  outline: solid;
}

.clear {
  clear: both;
}

結果

要素 “Aテキスト” のTOPマージンが取れました。

ボックス1
ボックス2
A テキスト A テキスト

clearixプロパティ

空要素を入れるのも良いのですが、clearixプロパティというのも使用できます。簡単に言うと、空要素を明示的にHTMLに記載していましたが、擬似要素を使用して同じようなことをやります。

HTML

<div class="clearfix">
  <div class="left-box">ボックス1</div>
  <div class="left-box">ボックス2</div>
</div>
<div class="box">A テキスト A テキスト</div>

CSS

.left-box {
  width: 100px;
  height: 100px;
  float: left;
  background-color: chartreuse;
  outline: solid;
}

.box {
  margin-top: 10px;
  width: 250px;
  height: 200px;
  background-color: red;
  outline: solid;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

結果

ボックス1
ボックス2
A テキスト A テキスト

横並びを止める方法2

横並び要素に親要素を追加し overflow: hidden プロパティを使用すると float が解除されます。

HTML

<div class="stop-float">
  <div class="left-box">ボックス1</div>
  <div class="left-box">ボックス2</div>
</div>
<div class="box">A テキスト A テキスト</div>

CSS

.left-box {
  width: 100px;
  height: 100px;
  float: left;
  background-color: chartreuse;
  outline: solid;
}

.box {
  width: 250px;
  height: 200px;
  background-color: red;
  outline: solid;
}

.stop-float {
  overflow: hidden;
}

結果

横並びがなくなりました。しかし、アウトラインが消えるのが気になります。

ボックス1
ボックス2
A テキスト A テキスト

最後に

float は癖が強いです。

© DeNnie.Lab All Rights Reserved.