文本包装浮动div内的问题

Question

当屏幕宽度太窄而无法显示一行上的所有文字时，我无法将框右侧的文字换成两行。相反，整个右侧在左下方碰撞。

如何将其包装成两行？这是fiddle

.box {
    height: 80px;
    clear: both;
}
.left {
    width: 90px;
    float: left;
    margin-right: 8px;
    height: 80px;
    border: 1px solid #ccc; 
}
.right {
    float: left;
}

Answer 1

你在.right所要做的就是添加一个大约40％左右的宽度，它应该只是在页面变小时进行文本换行。

.right {
    float: left;
    width: 40%;
}

Answer 2

正如haxxxton的评论所指出的，从float移除.right会产生desired behaviour。如果没有空间，浮动元素将会断行。