浮动元素加margin后不换行解决方案

说实话，我为了给这个问题想标题都晕乎了半天，实在是不知道怎么描述，姑且就用了这个很傻的标题。 T_T
我用个例子把问题简单描述下。比如说有个DIV宽度为380px，它里面有一个菜单列表，每个菜单宽度为60px，同时margin-right为20px。如果就按照下面的HTML结构来做的话，那么这个菜单列表能在这个DIV里一行显示完整吗？

 <div>
     <div>Fl</div>
     <div>Ps</div>
     <div>Fx</div>
     <div>Dw</div>
     <div>X</div>
 </div>

来做下小学算术题。5个菜单，每个宽度为60px，右边外补白为20px，因此每个菜单整体宽度是80px，5个菜单总长度为400px，而父级层宽度只有380px，根据浮动的原理，那么第5个菜单将毫无疑问的被挤下去。

怎么办呢？就我所能想到的就是加个遮罩层（思路来源于photoshop）。

 <div>
     <div class="overflowDiv">
         <div>Fl</div>
         <div>Ps</div>
         <div>Fx</div>
         <div>Dw</div>
         <div>X</div>
     </div>
 </div>

父级层宽度380px，overflow为hidden，遮罩层宽度为菜单需要的400px。因此，很自然的，遮罩层多出的20像素部分则不会显示出来。而菜单就在这400px的宽度里为所欲为了。

OK，方法说完了。似乎，解决起来也很简单的样子。呵呵，但要说明这个问题叫什么名字，我就晕乎了 @_@

如果各位看官已经看到这里了，我要是不放个Demo，似乎不太厚道。演示地址：Demo我在这里噢

Demo最后我扩展了一个作为栏目模块的应用。这个也是很有实际应用价值的。比方说，页面上有6个栏目模块，一行2列分布，两个栏目之间要有一定空白，自然我们就会用margin-right来设定这个空白间隙。单数列栏目的margin-right就表现为空白间隙，而偶数列栏目的就很惬意的隐藏在遮罩层里。记得在几年前刚开始用DIV做这种布局的时候，总是让程序计算逢单数列就给左浮动样式，逢偶数列就给右浮动样式。这样的话，如果栏目太多程序开销太大。而且能用CSS解决，为什么要麻烦程序呢？

其实，这个解决方案也不是什么新话题了。我这几年遇到类似的问题都是这样解决的。最近有人问起这个问题了，三言两语又怕说不清楚，就干脆写写算是备忘吧。当然，如果各位看官如果有更好的办法，希望能告诉我噢。我太懒了，这种方法用惯了，也没怎么去深究其他的。就有劳各位牛人协助了。