cssでfloat(フロート)を解除する方法

  • このエントリーをはてなブックマークに追加

スタイルシートもずいぶんとわかってきたつもりでしたが、
「えっ」「どうして?」ってことはしょっちゅうです。
今回は親要素の中に入れるボックスにフロートレフトを指定したところ。
別の親要素がかぶってしまいどうしてもうまくいきませんでした。

f:id:tegecat:20110910165950p:image
IEならきちんと表示されるのですが、

f:id:tegecat:20110910165949p:image
Firefoxだとフロートの指定をしたボックスの上にかぶってしまうのです。

大抵の場合表示のおかしいのはIEなので、
私のcssの書き方がおかしいのでしょうね。

でググるとこのサイトが、
-float(フロート)を解除する3つの方法-Whisper | Diary

今までは回り込み解除は全てclear:bothを使っていたのですが、
clearfixとoverflow:hiddenがあるのですね。

で親要素に対してoverflow:hiddenを指定すると無事表示。
また勉強になりました。

本当に毎日勉強ですね。

SNSでもご購読できます。

コメントを残す

*