floatについて学ぶ

こんばんは。なりです。

前回に引き続きコーディングのことについて書いていきます。

題材はCSSのfloatです!

floatはテキストで勉強したときは

「これ便利じゃん!!」と思ったのですが、

実際に使ってみると…

クセが強い!!!

そんな印象です。

floatの勉強した内容を書いていきます。

また、訓練では授業後に勉強会が行われていました。

その勉強会では主催者の方がお題をくれて

それについて1時間ほど

教えてもらいながら意見交換していくという感じです。

その勉強会が…

勉強になる!!!!

みんなスタートラインは同じなので

同じ様なところでつまづいたり、

悩んだりするわけです。

それを踏まえて例を出してくれるので、

分かりやすく、

とても勉強になりました。

勉強会の内容も入れて書いていきたいと思います。

float

floatを使うときですが、

下の図のようなときではないでしょうか!??

画像を並ばせたい

要素を並ばせたい!!

floatは要素を並ばせるときに役立ちます。

floatの基礎知識

float

floatの前に…

基本的にHTMLに記載された要素同士は

基本知識

  • 左揃えになる
  • 縦並びに配置される

この原則があります。

この原則を無視して、

下の図のように要素を回り込ませて配置できるのがfloatです。

画像を並ばせたい

floatの指定値

floatの値には

  • float:left;
  • float:right;
  • float:none;

この3つがあります。

leftとrightは左右の指定した方に寄せるということです。

noneは初期値で指定なしとなり、

前述の原則通りの配置になります。

floatの解除

floatを指定すると解除が必要です。

解除しないとfloatをかけた下の要素も影響され

配置がおかしくなってしまいます。

解除方法は

  • clear:both;
  • clearfix
  • overflow:hidden;

3つの方法があります。

解除方法を詳しくみていきたいと思いますが、

今回は

  • clear:both;
  • clearfix

この2つについて書いていきます。

clear:both;

詳細を書く前に例題について説明します。

図のHTMLはこうなっています。

HTML説明

before、aftercontentがあり、

その間にparent要素があります。

parent要素の中には、

child1~3の子要素が入っています。

parent要素の中にクラスがありますが気になさらず!!

そして、各要素にはbackgroud-colorやwidth等が設定されています。

では、clear:both;の説明に入ります。

解除方法は

「回り込みを解除させたい要素にclear:both;を適用する」

例1

1番目と2番目の子要素にはfloat:left;

3番目の子要素にclear:both;を適用した図です。

clear:both;

3番目の子要素でfloatが解除されるので

1番目と2番目は左によっています。

また、解除しているのでレイアウトの崩れもありません。

灰色の部分は親要素(parent)です。

子要素の高さが親要素の高さとなっています。

例2

1~3番目の子要素すべて回り込ませたい。

しかし3番目の子要素の次に解除するための要素がない。

clear:both;

floatを解除していないのでレイアウトが崩れてしまっている。

親要素がない。→あるのですが、高さがないので見えなくなっています。

まとめ

例と踏まえて注意点を書いておきます。

  • 回り込みを解除させたい要素にclear:both;を適用する
  • 回り込みを解除させたいところに要素がない場合が大変
  • floatで要素が浮いてしまうため、親要素の高さがなくなる

clearfix

解除方法は

「親要素にclearfixクラスをつける」

「CSSにclearfixの記述する」

CSSにはこんな感じで書いたらいいと思います。

clearfix

afterの疑似要素を使っています。

では。clear:bothではできなかった

1~3番目の子要素すべて回り込ませたいと思います。

親要素にはクラスを指定して、

子要素にはfloatを指定します。

clearfix

3番目の子要素も回り込みました。

また親要素の高さもあります。

まとめ

注意点を書きます。

  • floatを解除させたい親要素にclearfixのクラスをつける
  • CSSにclearfixについて書いておく
  • clearfixするためにはfloatをかける要素の親要素が必要となる

floatまとめ

floatとfloat解除はセットである。

解除を忘れてレイアウトが崩れてしまうことがありました。

解除をすることも大切ですが、

解除方法に合わせたHTMLのマークアップを考えておかなければなりません。

floatを使用すると要素が浮いてしまう。

そのため、clear:bothの例2のように

下の要素が入りこんでしまうので注意。

そのときは、paddingなどで調整する。

floatの上位互換として最近では

flexboxがある。

いつかflexboxについても書きたいと思います。

便利ですね!!

では、今日はここまでです。

ありがとうございました。