cssの【float】について教えてください。

質問

理屈で覚えるつもりはないのですが道理がどうしても分かりません。

レイアウトなどでボックスを二つ以上横並びにする場合、必ず最後のボックスにも【left】なり【right】を指定しますよね？
なぜでしょうか？
確かに一つ前のボックスに回り込み指定をしても回らないため、回り込み指定をするしかないのですが。

しかし三つボックスがある場合は、一つ目のボックスに回り込み指定をしたら二つ目は回り込みますよね？
二つ目に回り込み指定をしても三つ目は回り込みません。

意見では【padding-left】の使い分けを言っている人もいますが、ますます分かりません。

回り込みをするにも、外枠がカッチリ決まってるのと決まってないのでは違うでしょうし、【clear】の使い方もいまいち分かりません。

詳しい方、お願いします。

回答No.1

naokita · ベストアンサー

この件は、
何度も体験して動作で理解しないと頭だけでは理解できないでしょう・・・

ブロック要素の場合、基本幅が100％幅なので、
入り込む隙間が無いと、flaot出来ない。
よって、widthで入り込めるpxを指定する事。
更に、幅widthにpaddingやborderが同時にあると、
標準モードだとwidthにその幅が加算されるので、
その分も計算しないと当然float出来なくなる。
つまり、
HTML,CSS、標準モード、過去モード、ブラウザ、などを把握しないと理解できないでしょう。
この辺は、
家の設計と同じなので、寸分の狂いも無く設計するか、
外枠に対し、内枠の合計で外枠未満の幅で余裕を持たせるかすれば、必ず３カラムに出来ます。

最後のボックスもfloatしないと何処にいくかは依存する事になるでしょう。
外枠の大きさも決めないと、ブラウザ100％に依存するから、
内枠を外枠に対しての％にしないと、ブラウザ幅を縮小されるとカラム落ちする。

clearに関しても同じで、
ブラウザによって解釈が違うので、ケースバイケースで使い分けたり、
clearfixを利用したり。この辺は賛否両論なので、100％完璧な方法は無いです。