2014年1月22日水曜日

floatとboth:clear

プライベートで色々ありました、色ピエロです。
もう今年になってから悲しいことばっかり・・・
でも元気なんで頑張ります。

話変わってみんな大好き、floatちゃんの話です
floatすると、レイアウトがガタガタになってたcssを覚えたての私。
なんで!?ってすごい困ってたのは良い思い出。

<div id="outline">
   <div id="left" style="float:left"></div>
   <div id="right" style="float:right"></div>
</div>

styleは本当はcssで書きます。
上記のようにやると、#leftや#rightが#outlineよりでかいボックスの場合、
#outlineから普通にはみ出たりするんでよね?レイアウトもガタガタ。
原因はもちろん"float"でこれを解除する(とじる)必要があります。
私はこれをいつもこうしてます。

<div id="outline">
   <div id="left" style="float:left"></div>
   <div id="right" style="float:left"></div>
 <div style="clear:both"></div>
</div>

ここでもclear:bothをstyleで書いてますが、本当はcssで書いてます。
他にもhiddenとかclearfixとか色々な解決方法があるみたいです。
さっき知りました・・・どれが一般的なんですかね??


0 件のコメント:

コメントを投稿