firefox 中碰到的一个小坑

情况描述：

在一个处于正常文档流的div中，里面有一部分文字，还有个有浮动的块，

上代码

HTML：

<div class="container">
   this is float word
   <div class="right">rightarea</div>
</div>

CSS：

.container{
float: left;
width: 300px;
height: 200px;
background-color: #f1f1f1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.left{
display: inline;
width: 200px;
background:#AAA;
}
.right{
float: right;
width: 40px;
background:blue;
}

显示情况

在chrome和IE中是这个样子的

对，没错，这是我想要的结果，但是，firefox中是这个样子的，

我就纳闷了，连IE都玩的好好的，你牛逼哄哄的FF怎么乱套了，哎，没有选择，解决！

由于一眼找不出什么毛病，清除浮动啥的都有，然后我就一个个的排查，最后发现有这么个东西影响着布局，white-space

把这个属性去掉，布局就正常了，于是我把后面这三句在父元素的代码移到了 .right 中，恩，问题是解决了。

不过还是劝同志们，除非你肯定左边这些文字占的宽度绝对碰不到右边的块，不然你还是乖乖的把左边也包起来，写个左浮动，这样

确保布局稳定。