CSS やってはいけないこと floatとは


  • floatで横に並んだ要素が足して100%になってはいけない。
    • 98%以下になるように幅を指定する。
    • ※98%を越える場合、横に並べたいのに、下に並んでしまったりする。
  • floatした要素には必ず横幅(width)を指定すること。
  • floatした要素にmarginやpaddingを指定してはいけない。
    • InternetExplorer6では、marginやpaddingの幅を2倍に計算してしまうバグがある為。
    • floatした要素にdisplay:inline;を記述するこでと回避できる。
    • IEは"widthのサイズはpaddingとborderを含めてのサイズ"と誤認している為。
  • paddingは一切指定せず常に0にする。
  • borderは、borderのみで宣言させ、padding、marginを0にする。
  • widthとmarginは一緒に指定するが、borderとpaddingは指定せず0にする。
  • floatした要素の後に設置されている要素(上図の青い要素)に、clearをしてはいけない。
  • floatは回り込みの解除(clear)を指定する必要があるが、
  • floatによって回り込みをさせられている要素にclearをかけてはいけない。


clearプロパティのメモ

  • clear: left;(左にfloatした要素の回り込みの解除)
  • clear: right;(右に〃)
  • clear: both;(左右両方にfloatした要素の回り込みを全て解除)
  • clear: none;(解除をしない)


ネタ元

こっちも要チェック!