REDLINE MAGAZINE | あまり知らないかもしれないclearの話

あまり知らないかもしれないclearの話

一般的にclearプロパティとは「回りこみを解除する」という解説が多く、100％その通りなのだが、どういう仕組でフロートさせたボックスを解除しているのかについてはあまり触れられてない気がするので今日のネタはそんな話。

私の愛読書「Web標準の教科書」でもこの辺りは詳しく解説されてあったのだが、同著ではclearは先行するフロートされたボックスに隣接するかどうかを定めるプロパティと書かれている。

なんとなくclearプロパティでfloatを解除する仕組が気になって仕様書を調べてみた。

9.5.2 Controlling flow next to floats:
the 'clear' property
以下、どういう仕組なのかの解説、引用･･･

left
The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
right
The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
both
The generated box is moved below all floating boxes of earlier elements in the source document.
none
No constraint on the box's position with respect to floats.

要するに、例えばクリアするボックスの上に左フロートさせたボックスがある場合「clear:left;」を適応したボックスはそのボックスの上側にフローとしているボックス分の上マージンを追加して上にある左フロートのボックスよりも必ず下にくるようにしているという仕組らしい。

文章だと分かりにくいので図にするとこんな感じ。

んでもって最終的に仕様書では、

When the property is set on floating elements, it results in a modification of the rules for positioning the float. An extra constraint (#10) is added:

* The top outer edge of the float must be below the bottom outer edge of all earlier left-floating boxes (in the case of 'clear: left'), or all earlier right-floating boxes (in the case of 'clear: right'), or both ('clear: both').

こんな感じでclearが使用された際にはfloat9つの掟に1つ追加して10個目の掟が現れると。

ここまで考えた上で今まで制作したサイトのページでclearを使った部分の事を思い出してみた。こういう時、FF、NN、Operaではクリアした時に、仕様書のとおりフロートしてるボックスの高さ分マージンが入って上のボックスとクリアしたボックスがピタっとくっつくわけですが、IEだと妙に余白があるなーと思ってたりしたわけですよ。これはIEさんのいつもの独自解釈と考えていいでしょうか。いいんでしょうね･･･。
>>どんなん？という方のためにサンプル（IEと他FFなどで見比べると･･･はぁ。）

2007年01月13日 14:08 | Red | パーマリンク