もじらで懺悔…#6…clear プロパティ編

さて、ちょっと間が開いてしまいましたが、「もじらで懺悔」のコーナーです。決してあきらめたわけじゃありませんよ。あはははは…汗…。

今日の懺悔は、「ソースの丸出し」に匹敵するくらい大罪に値するのではないかとめぐ味屋自身思うのであります…。

　●clear プロパティ抜けによるレイアウト崩れ

です。。。しかしこんな馬鹿者、私だけでしょうか…（ネタじゃないのよ〜涙笑〜）。
…では、以下に、簡単な例を書いてみます…。

　＜div style="width:100%;">
　　＜img src="イメージのパス" alt="ねこアイコン"
　　　　width="150" height="150" style="float:left;" ＞
　　　　ここに文字を入れると文章が回り込むの。
　　　　ちょっとうれしいわ…
　　　　うふふ…
　＜/div＞
　ここにも文字を書く。

これをIE5.5 ともじらで見てみます。

• IE5.5
  
• mozilla
  

…うへぇ…。

作者（私　笑）は、IE5.5で見えてるようになるよう意図していたので、あ、ちゃんとできてる。るるるる〜と思い、そのままでありました…。でも、もじらで見ると＜/div＞の後の「ここにも文字を書く」は、floatが生きている限り、どんどん（この場合絵の右に）回り込んでいくのです。画像の高さが終わるまで…。で、これは文字だけでなく、画像であろうが、どんどん回り込みます。。。

この場合、
「うふふ…」の後、＜/div＞の前に＜br style="clear:left;"＞を入れてやって、float で定義した回り込みを解除します。そうすることによって、ああ、ここで回り込み終わりなんだなってブラウザが理解してくれて、ちゃんと意図したとおりに表示できるようになります。

---

2004/10/13 19:44追記：
例によってWEB標準普及プロジェクトからですが …とありました。しかし、また続きの下りに以下のようにもありましたので、 このページでも上記の例では、＜br style="clear:left;"＞を使っておくことにします。後述にブロックレベル要素で clear プロパティを使った例が出てきます。

---

んでは、もっと実際問題としての、悲惨な状態を簡単に書いてみます。

• IE5.5
  
  
• mozilla
  
  
  

これは、まったく同じHTMLソース、そしてスタイルシートの定義なのですね。。。

　：HTML ソース：
　　＜div id="bodylay"＞
　　　＜div id="lay01"＞
　　　　■＜br＞
　　　　ここはfloat:left＜br＞
　　　　文字を入れてみます。ちゃんと出来てる？
　　　＜/div＞
　　　＜div id="lay02"＞
　　　▼これは悲惨なんてモンじゃないです。
　　　＜/div＞
　　●
　　＜/div＞

　：スタイルシート：
　．bodylay　｛
　　　width: 20%;
　　　padding: 0px;
　　　margin: 0px;
　　　…省略
　｝

　．lay01　｛
　　　float:left;
　　　padding: 5px;
　　　margin:6px;
　　　…省略
｝

　．lay02　｛
　　width:98%;
　　padding: 5px;
　　margin: 6px;
　　…省略
　｝

です。で…。

もう、おわかりかと思いますが、これは、「lay02」に「clear:left;」を追加すればちゃんと表示されます。例によって、「padding」「margin」を定義する場合は、「width」は取ります。。。るるる。。。

めぐ味屋ブログ内参考記事：
もじらで見る！ #2 width, padding 編
もじらで懺悔…width, padding, margin 編
もじらで懺悔…#2…width, padding, margin 編#2

…さて、いよいよ、懺悔に一区切りついたでしょうか？（本当？汗…）。今後は、自分のサイトを実際に直しながら、「うへぇ〜」と気がついたことがあれば、記事にしてみたいと思います。

　# まず手始めは、「るるろぐ」だ〜 #