blue

続・clearing問題

  • Posted by: SOMA Hitoshi
  • December 26, 2008 7:43 PM
  • web

　いまさらだが、友人の上山君に宛てたもう二年ちかくも前の記事「世に言うclearing問題（直前のfloatだけをclearしたい）」のつづき。一年越しで新たな回答を見つけたということでもじつはなく、件の記事を書いた時点で「ああやってもいけるんだよなあ」と頭にあって、しかし説明が煩雑になるだろうなと省いたものを、なぜかいまになって説明しよう。というのも最近HTMLを書いていてこの「clearing問題」を思い出したからだが、じつをいって、この回答がいちばん上山君の要望（直前のfloatだけをclearしたい）に直接的に応えているかもしれない。

　いったい何を指して「clearing問題」と言っているのか、くわしくは「世に言うclearing問題（直前のfloatだけをclearしたい）」を参照していただきたいが、おさらいとしてざっとだけ説明しておこう。

上山君がやりたい（やりたかった）こと

　だからその、上山君からこの相談を受けたのは2007年の2月なのだが、そのとき上山君が実現したかったページレイアウトを画像で示せばこういうものである。

070206_layout.png

　で、当初、上山君はこの2カラムのレイアウトを、

#hideo { float: left; width: 200px; }
#kyoko { margin-left: 210px; }

といったふうに指定していた。この指定（だけ）で何がまずいかというと、右側のボックス div#kyoko 内で画像の回り込みを解除するため clear: left; を使うと、左側のボックス div#hideo に指定してある float: left; まで解除されてしまうからで、つまり、このようになってしまうのだった。

英夫日記の本文

回り込みテキスト回り込みテキスト

回り込みを解除して本文のつづき回り込みを解除して本文のつづき回り込みを解除して本文のつづき

恭子日記の本文

回り込みテキスト回り込みテキスト

回り込みを解除して本文のつづき回り込みを解除して本文のつづき回り込みを解除して本文のつづき

　ちなみに上のサンプルは次のようなソースになっている。

// HTML

  1.  <div id="wrapper">
  2.    <div id="hideo">
  3.      <p>英夫日記の本文</p>
  4.      <div class="photo"><img src="photo.png" /></div>
  5.      <p>回り込みテキスト回り込みテキスト</p>
  6.      <p style="clear: left;">回り込みを解除して本文のつづき回り込みを解除して本文のつづき回り込みを解除して本文のつづき</p>
  7.    </div>
  8.    <div id="kyoko">
  9.      <p>恭子日記の本文</p>
  10.      <div class="photo"><img src="photo.png" /></div>
  11.      <p>回り込みテキスト回り込みテキスト</p>
  12.      <p style="clear: left;">回り込みを解除して本文のつづき回り込みを解除して本文のつづき回り込みを解除して本文のつづき</p>
  13.    </div>
  14.  </div>

// CSS

  1.  #wrapper { width: auto; }
  2.  #hideo { float: left; width: 200px; background: #ebebeb; }
  3.  #kyoko { margin-left: 210px; background: #ebebeb; }
  4.  .photo { float: left; margin: 0 1em 1em 0; }

解決策

　これに対し、「リキッドレイアウトでなくてよく、ボックス内で使われるのが float: left; のみなのであれば」といった限定付きでの解決策や、そもそも clear を使わずに回り込みを解除する方法など、いくつかの方法を「世に言うclearing問題（直前のfloatだけをclearしたい）」のなかでは紹介した。
　で、以下が今回の別解。
　こまかな説明はけっきょく省くが、この方法ではHTML側の構造を若干変え、右側のボックス div#kyoko 内にもうひとつ div#kyoko_content を入れ子にして、その div#kyoko_content に float: left; を指定している。すると以下のとおり、表示結果はあたかも「直前の float だけを clear」したようなかたちになるのである。

英夫日記の本文

回り込みテキスト回り込みテキスト

回り込みを解除して本文のつづき回り込みを解除して本文のつづき回り込みを解除して本文のつづき

恭子日記の本文

回り込みテキスト回り込みテキスト

回り込みを解除して本文のつづき回り込みを解除して本文のつづき回り込みを解除して本文のつづき

　ソースは以下のような具合。

// HTML

  1.  <div id="wrapper">
  2.    <div id="hideo">
  3.      <p>英夫日記の本文</p>
  4.      <div class="photo"><img src="photo.png" /></div>
  5.      <p>回り込みテキスト回り込みテキスト</p>
  6.      <p style="clear: left;">回り込みを解除して本文のつづき回り込みを解除して本文のつづき回り込みを解除して本文のつづき</p>
  7.    </div>
  8.    <div id="kyoko">
  9.      <div id="kyoko_content">
  10.        <p>恭子日記の本文</p>
  11.        <div class="photo"><img src="photo.png" /></div>
  12.        <p>回り込みテキスト回り込みテキスト</p>
  13.        <p style="clear: left;">回り込みを解除して本文のつづき回り込みを解除して本文のつづき回り込みを解除して本文のつづき</p>
  14.      </div>
  15.    </div>
  16.  </div>

// CSS

  1.  #wrapper { width: auto; }
  2.  #hideo { float: left; width: 200px; background: #ebebeb; }
  3.  #kyoko { margin-left: 210px; }
  4.  #kyoko_content { float: left; background: #ebebeb; }
  5.  .photo { float: left; margin: 0 1em 1em 0; }
  6.  #wrapper:after { content: ""; display: block; height: 0px; clear: both; }

関連記事

トラックバック(0)

トラックバックURL: https://web-conte.com/blue/mt-tb.cgi/430