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を指定すると無事表示。
また勉強になりました。

本当に毎日勉強ですね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

無理せず楽しく、手作りの小さな暮らしを大切に。
アラカンの「つづく生活」実践者です。
半自給自足を目指しながら、仕事・趣味・家のことをコツコツ楽しんでいます。
日々を淡々と綴ることで、人生を整えるヒントが見つかればと思っています。

目次