一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

CSSのfloatについて

今回はCSSのfloatについて書きたいと思います。

まず、floatとはなにか↓


floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、その反対側に回り込みます。
尚、floatプロパティは、positionプロパティで static以外の値が指定されている要素には適用されないので注意してください。


だそうです。
スタイルシートリファレンスを丸パクリ→http://www.htmq.com/style/float.shtml

ひとまず、


・要素を左やら右やらに寄せたいときに使う。
・positionでstatic以外の値を指定している要素に対しては無力。


という事がわかりました。

でも「左とか右に寄せる」ってなんだかざっくりしすぎてて深く理解できた気がしません。

そこでもう少し深く調べて見ると、
CSS3スタンダードデザインガイド

CSS3 スタンダード・デザインガイド

CSS3 スタンダード・デザインガイド

にこう書いてありました。


floatで配置した部分はフローティングボックスという特殊なボックスを構成し、通常のボックスからは存在しないものとして扱われる。



ふむ。

でも存在しないものとみなしたら、floatした要素の中身はどうなんの??
display:none扱いされて消えんの??それってあんまりじゃねえ?


と動揺を隠せずにいたら、さらにこう続きます。


ただし「ボックスの中身はフローティングボックスと重ならないように表示する」という決まりがある


なるほど(・∀・)
つまりたとえば

<div style="float:left;">浮いてますよー</div>
<p>しっかり存在しますよー</p>

というふたつの要素があった場合。

divはpから見て浮いた存在とみなされるが、「浮いてますよー」という中身の部分とは重ならないように表示しなければならない。
よってpの中身「しっかり存在しますよー」がdivの「浮いてますよー」の右側に回りこんだ形で表示される。

なるほど(・∀・)
これなら、floatかけた要素の親要素の高さが0になったりするのも理解しやすいです。要するに子要素が浮いておるからですね。だから自分の高さを見失うのですね。

ちょっと雑な理解になってしまいましたが、普段何気に使っているfloatについてちょっとだけ理解が深まりました。


なんか間違えてたら教えてください、偉い人。


小さなことからコツコツと。