Topテクニックメモスタイルシートネタ > floatしたときの注意

floatしたときの注意

floatを使うと、よく思いもしない表示になったりする事があります。
特にWin IE5.0や5.5あたりは…(--,)

というわけで、floatをするときに注意点です。


floatするときは、widthを指定する
IEで、フロートを含むボックスのマージンが無視されるなどの問題があるため。
※左フロートでは左マージンが、右フロートでは左マージンと上マージンが無視されます。
floatとmarginを一緒に指定しない
IEで、float: left;に左マージン、float: right;に右マージンをつけると、指定値の約2倍になってしまいます。
display: inline;を付ければ回避できるらしいです。
フロートに後続する通常フローでかつclearしていないブロックボックスにはwidthもheightも指定しない。
※フロートに後続する要素に幅か高さが指定されているとき、その要素の幅はフロートの幅を確保するように短縮される。また、フロートと後続要素の間に無くすことができない隙間ができる。
clearするボックスの上marginは0にし、widthも指定する
※clearプロパティによってフロートとの隣接を抑制した要素に上マージンを指定すると、フロートの下に指定値分の幅の上マージンができてしまう
絶対配置要素のコンテナブロックにはwidthを指定する
※絶対配置された要素が、後続する別の要素のマージンを引き継いでしまう
絶対配置要素の位置指定はtopとleftまたはrightとbottomで行う。leftとrightやtopとbottomを同時指定しない
※leftおよびtopプロパティが指定された要素では、rightおよびbottomプロパティの指定が無視される
overflowを使うときは同時にwidthやheightを指定する
幅も高さも明示されていない相対配置要素に overflow: hidden; を指定しても、絶対配置された子孫要素に対してその指定が効かない

「floatしたときの注意」関連本

Akasa Rira
みつけたきせき