横並び（float）の要素で要素同士にmargin-rightなどで余白を指定した場合に（幅を超えて）右端だけ折り返される

CSSのfloatプロパティを使用した横並びの要素で、横並びの要素間にmarginプロパティなどで余白空けたいなどがあります。

【HTML】

<ul class="sample"> <li>sample</li> <li>sample</li> <li>sample</li> <li>sample</li> <li>sample</li> <li>sample</li> </ul>

【CSS】

ul.sample { width:320px; } ul.sample li { margin:0 10px 10px 0; width:100px; float:left; background-color:#ddd; }

上記コードの場合、本来の仕様では横3つ縦2つで並べたいわけですが、3つ目と6つ目にも右にmarginが与えられ、幅を超えてしまい折り返されてしまいます（当たり前ですが）。
古いブラウザではlast-child疑似クラスやfirst-child疑似クラスは使用できませんので、古いブラウザでも対応する場合は以下のように親要素の幅をmarginを含めた幅に指定し、余分に指定した分だけネガティブmarginで打ち消すことで解消することができます。

【CSS】

ul.sample { margin-right:-10px; width:330px; } ul.sample li { margin:0 10px 10px 0; width:100px; float:left; background-color:#ddd; }