float:leftやfloat:rightを使う時に注意する点とその対策について教えてください。

Question

float:leftやfloat:rightを使う時に注意する点とその対策について詳しく教えてください。
時々、floatを使うと要素の高さや幅をしっかり指定しないとおかしくなる時があります。

Answer 1

float:leftやfloat:rightを使う時に注意する点とその対策について教えてください。

そもそもfloatを使わないでください。
float: leftやfloat: rightが役に立つ場面なんて今後一切ありません。

floatを使う動機は主に「サイトの構成を2カラム、3カラムにしたい」というものでしょう。
この使い方でfloatで良かったねと思える日は一生来ません。
何故ならば…

• floatは勝手に持続するので、容易にページ全体のデザインが空中分解する
• 下にある要素がclear: bothしなければならない

つまり他の要素にプロパティを書き足す事になる為にHTMLとCSSが密結合になる
回避する為にクリアフィックスみたいな逃げ方はあるものの、CSSハックだらけになりコードが汚れる

• 親子関係を無視し始めるケースがある
• 浮かせる為に要素のサイズを全て指定しなければならなくなる

これで2〜3カラムを表現するのはCSS2がなかった時代の産物で、IE6対応がクライアントから言い渡されて
「マジかよ…floatを使ったらもう保守なんてできんぞ、もう俺はこの会社から逃げる、後は野となれ山となれだ！」
という決死の覚悟で望むものだったからです。

※上でfloatは一切使えないと言いましたが、1段落の中で画像と回り込みテキストを使いたいようなケースでは使えますね。

---

代替手段も数多く存在します。

• inline-block
• flexbox
• table-cell

調べて乗り換える事をオススメします。

Answer 2

時々おかしくなるのではなく常におかしくなります。
floatは「浮く」というものです。floatすると親のボックスは
その要素の高さや幅を捉えられなくなって無視します。

今はflex等あるので「横並びにする」程度の目的なら使わないほうがいいです。
https://jsfiddle.net/sousuke/7pho44h1/

Answer 3

float:leftやfloat:rightを使う時に注意する点とその対策について詳しく教えてください。

時々、floatを使うと要素の高さや幅をしっかり指定しないとおかしくなる時があります。

clearfixを使えば、回り込み解除後の高さがおかしくならず、綺麗に高さが決まります。
clearfixの使い方

Answer 4

質問者さん自身で思われているとおり、要素の高さや幅をしっかり指定することです。