多个float的div元素，在浏览器缩小宽度时，显示为两列，为何不能显示为1列

我的问题是为什么最低是两列呢？？？麻烦各位解答一下，最近在看《Head First HTML&CSS》：

贴上效果先, 再向左或者向右缩小浏览器就不行了，最少是两列

贴上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /*我这里并没有给浮动元素指定width, 我知道这如果不指定width,元素的宽度会尽可能的窄*/
            .box {
                margin: 5px;
                float: left;        
                border: 1px solid green;
            }
        </style>
        
    </head>
    <body>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        
        
    </body>
</html>

环境
Chrome 版本 24.0.1312.57

chrome在水平方向上不能低于400px（osx）和280px（windows）
参考：browser-doesnt-scale-below-400px

【热门文章】