11.「float」は浮かせて寄せる ～平面なのに立体的～

floatって？

要素を横並びにしたい時に、使うCSSプロパティの１つです。

・・・

そっとページを閉じようとしている、そこのあなた！

大丈夫です。

噛み砕いて、書きますので見ていきましょう。

要素を横並びに？最初からなるんじゃないの？

要素のある性質によって、横並びになるもの、ならないものがあります。

それは以前の記事で書いた「ブロックレベル」と「インライン」のお話です。

5.昔話と侮るなかれ ～HTMLの要素には「かたさ」が存在した！？～ - web制作のしおり

参考までに。

今回のfloatに大きく関わってくるのが、ブロックレベルの性質です。

ブロックレベルの性質って？

「他の要素と縦に並ぶ」という性質があります。

その為、ブロックレベル要素はデフォルトで縦に配置されるのです。

つまり、冒頭申し上げた「要素を横並びにしたい」場合は別途設定が必要なのです。

じゃあ、どうすれば横並びになるの？

そこで登場するのが「float」です。(※横並びにする方法は他にもあります）

floatはCSSのプロパティの１つで、次のような特徴があります

• 要素が浮く
• 左か右を指定して要素を寄せる
• 要素をブロックレベルにする

3つ目はあまり知られてないと思います。

１つずつ見ていきましょう。

要素が浮く？

通常、デザインは平面に要素を配置していきます。

floatを適用すると、文字通り「要素が浮いたような状態」になります。

※目視で浮いているのはわかりません

浮いたら何が起こるのか？

通常、要素が要素の下に入り込んで重なるようなことはありません。

それが、要素が浮いてしまうので、下に入り込むような動きをするのです。

これはfloat解除の設定をするまで、維持されます。

この動きは意図しないデザイン崩れを起こすので、対応が必要です。

右か左を指定して要素を寄せる

float : leftを設定とすると、浮いた要素が左によります。

さらに別の要素にもfloat : leftを設定すると、

最初に浮いて、左に寄った要素の隣に配置されます。

要素をブロックレベルにする

インラインの要素にfloatを設定すると、自動でブロックレベルになる。

これは検証してみました。

インライン要素である<a></a>に対して、floatを設定したところ、

heightが反映されるようになりました。

※インラインheightとwidthが設定できない。参考↓

5.昔話と侮るなかれ ～HTMLの要素には「かたさ」が存在した！？～ - web制作のしおり

今日のまとめ

• floatは文字通り要素が浮くイメージ
• 要素を左右に並べたい時に使う
• floatを設定すると自動でブロックレベルになる。

今後、floatとセットでclearを使うについても整理してまとめたいと思います。

ではまた。