フロートさせた横並び要素の余分なマージンをなくす

フロートした横並びブロック要素の間に、マージンを指定して余白を作ることはよくありますよね。この時各要素の右側にマージンを指定すると思うんですけど、場合によっては一番最後の要素だけは右側のマージンが必要ない場合もありますよね。
親要素にピッタリ納めたいときには、そのマージンのせいで親要素の幅に収まりきれず、下に落ちてしまいますよね。これを解決するには、間にひとつブロックレベル要素を入れて、その幅を少し大きくしてあげることで対応できます。要素がひとつ増えるのがイヤだなーって思うかもしれませんけど、[ul] タグと [li] タグでマークアップするときには使えますね！

 

 

サンプル

3枚目の写真（[li]タグ）の写真の右マージンをなくした訳ではなく、直近の親要素（[ul] タグ）の幅を広げただけです。div（白背景）よりも、[ul] タグの幅が広くなるけれど、[ul] タグは高さ 0 になるし、場所によっては便利な小技ですね！