今さらながらの CSS – float についての覚書

今どきの Web のレイアウトといえば Flexbox だと思うんですが、いまだに Float が大活躍している雑廉堂です。

ちょっと Float について自分なりの覚書です。

 

 

CSS : float

float に関する説明は 「 float - CSS: カスケーディングスタイルシート | MDN」 を読んでいただくとして、この float っていう CSS プロパティはいつも解っているつもりでも、なぜか掴みどころもなくレイアウトが崩れてしまうことが多いんですよね。

今回はその検証の記録。

 

レイアウト崩れの検証

まず、HTML。ベースのコンテナボックス（div.container）にボックスA（div.boxa）、ボックスB（div.boxb）包含している形。

<div class="container clearfix">
  <div class="left boxa imgbox">
    image box
  </div>
  <div class="left boxb">
    Lorem ipsum dolor sit amet
  </div>
</div>

続いてCSS。

ボックスA、ボックスBには共に、.left { float: left; } を割り当てて、コンテナボックスに clearfix で ::before、::after 疑似要素で float （浮動）を解除している、典型的な形。

コンテナボックスには、幅（100%）、ボックスAには幅と高さ（100px）でサイズを指定しているけれども、ボックスBにはサイズの指定はしていない状態なのがミソ。

html {
  font-size: 14px;
}

div {
  box-sizing: border-box;
}

.left {
  float: left;
}

.right {
  float: right;
}

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

.imgbox {
  width: 100px;
  height: 100px;
}

.container {
  padding: 0.5rem;
  width: 100%;
  background-color: rgb(196, 196, 196);
}

.boxa {
  background-color: rgb(255, 196, 196);
}

.boxb {
  background-color: rgb(196, 255, 196);
}

コレを実際のブラウザで表示させると下のようになります。

よくある、画像のサムネイル（ボックスA）と、その説明（ボックスB）が付いているような、WordPress などでいうところの記事一覧のサムネイル付きのようなレイアウトをイメージしています。

コレはコレでうまく表示されているように思われるんですが、ボックスBの内容（説明）が現状の幅一杯を超えると途端にレイアウトが破綻してしまうんですよね。

いつもこうなった時に悩んでしまう。

いい加減にCSSもHTMLも勉強してきたからこういった時に困るんですよね。「 Flexbox を使ったほうがいいよ」 という意見もあるとは思うのだけれども、なんとかしてこの Float 野郎をねじ伏せたいじゃないですか。

 

レイアウト崩れの原因

でも、答えは単純。

ボックスBに幅を指定してやればいいです。

まず、ボックスBのクラスに、description というクラスを追加します。

<div class="container clearfix">
  <div class="left boxa imgbox">
    image box width 100px, height 100px.
  </div>
  <div class="left boxb description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Morbi tristique sapien ac erat tincidunt, sit amet dignissim
    lectus vulputate. Donec id iaculis velit. Aliquam vel
    malesuada erat. Praesent non magna ac massa aliquet tincidunt
    vel in massa. Phasellus feugiat est vel leo finibus congue.
  </div>
</div>

スタイルシートにも、description クラスのスタイルと登録。

html {
  font-size: 14px;
}
    :
    :
.description {
  width: 300px;
}
    :
    :

そして、その結果・・

適当に幅を入れたのもあるが、大変不格好ですよね。

今どきレスポンシブだなんだと言ってるのに、幅をちまちま計算するのも面倒。

また、実際にウィンドウの幅を変えてもらったらわかりますが、ボックスBの幅が300px以下になるように変えてみると、やはりレイアウトがくずれてしまいます。

 

Calc() を使って

ということで、便利な calc() 関数を使ってみる。

.description {
  width: calc(100% - 100px);
}

内容は簡単、幅を100% から 100px、つまりボックスAの横巾の分を引けば良いんですね。

もちろん念の為ですが、DIV要素の box-sizing プロパティの値を border-boxにしています。この設定を忘れていると、何度やっても幅が合わないという怪現象に見舞われるので、気をつけないといけません。

仕事でもプライベートでも、いろいろ煮詰まってくると簡単なことさえ見逃してしまいますね。

 

ついでに・・

ついでに、ボックスBの高さをボックスAと揃えるとどうなるかというと・・

こんなふうに文字が溢れてしまいます。

こういう場合は、overflow プロパティを指定するか、ボックスBの高さを制約しないようにしましょう。

 

まとめ

float に関する簡単な検証でした。

これはちょうどこの間、「人気記事一覧」や「最新記事一覧」をサムネイル付きで記事の一覧を表示するための作業中に悩んだ事があったので、ちょっと調べて検証してみました。

あくまで個人的なメモなので、宜しくおねがいします。