CSS浮动元素中断到下一行

Question

我遇到了这样的情况：

HTML

<div class="outer clearfix">
    <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="three">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>

CSS

.clearfix:after {
        content: '';
        display: block;
        clear: both;
    }
    .outer {
        background: #ccc;
    }
    .outer div {
        border-right: 1px solid red;
        float: left;
        padding: 10px;
        width: 100px;
    }

在这里，我希望第4和第5个div在新行中。 我怎么做。我在第3和第4个div之间尝试了br标签..没有用。