作成:2015/01/10画像にテキストをfloatで回り込ませた時、テキストの高さが画像より低い場合画像がボックスの外に出てしまいます。ボックスに背景色やボーダーを付けたい時にこの現象を放置しておくと表示が崩れたように見え、よろしくありません。そこで、floatした画像もキッチリボックスの中に収まる方法を紹介します。clearfixfloatを使うなら必ずと言っていいほど必要になるのが「clearfix」というCSSのテクニック。クラス名は「clearfix」という名前でなくても構わないが、一般的に使われるのが「clearfix」なので特別な理由がない限りこのクラス名を使って慣れた方が、他人のコードを読みやすくなったりするのでオススメ。「clearfix」は様々な種類があり、ブラウザが進化するに連れて簡素化されてきている。block;}これだけ。実際のHTMLとCSSで使うと下記のようになる。block;}これでボックスからはみ出ていた画像がボックスの中に収まる。おわりにfloatの挙動はかなりクセがあるので慣れるまで時間がかかります。floatで起こる問題はたいていclearfixで解決できるので、表示が崩れたらclearfixを当ててみると良いです。1人で完結しているオールインワンブロガー。経験したり学んだ事を発信し続けていたらブログで生活できるようになりました。自分の能力(ちから)で生きていくを信念に、ストレス無く自分の人生を楽しむことをに全力を注いでいます。このブログの転載、引用については「転載、引用について」をご覧ください。SWT710」レビューオールバーズのスリッポンタイプレビュー【Allbirds】マーケティング脳を身につければ人生が好転する。