floatを使う時の注意 | ユーリの備忘録

ユーリの備忘録

日々の生活で思ったことや仕事の中で見つけたことなんかを記録。

最近のHTMLページはdivタグで組むのが主流。


その中でfloatでレイアウトすることも多い。


<div>

  <div style="float:left;">・・・</div>

  <div style="float:right;">・・・</div>

</div>


とか、よく見る2カラム構成。

ただこれ、ちゃんとfloatを解除しておかないとブラウザによってはバグることがある。



<div>

  <div style="float:left;">・・・</div>

  <div style="float:right;">・・・</div>

  <div style="clear:both;"></div>

</div>


と、空タグを入れることを忘れずに。


ちなみにwordpressだと空のdivタグが削除されてしまう。

そんな時は、

<div style="clear:both;"><span> </span></div>

と、spanタグを噛ませることで削除を回避できる。

wordpressはややこしいな・・・。