关于css div浮动的问题 - 编程论坛

<head runat="server">
    <title></title>
    <style type="text/css">
      #all{width:600px;height:100px;}
      #u1{width:300px;height:100px;float:left}
      #u2{width:300px;height:100px;}
    </style>
</head>
<body>
    <div id="all">
    <div id="u1"></div>
    <div id="u2"></div>
    </div>
</body>
</html>
-------------------------------------------------------------------------------------
<head runat="server">
    <title></title>
    <style type="text/css">
      #all{width:600px;height:100px;}
      #u1{width:300px;height:100px;}
      #u2{width:300px;height:100px;float:right}
    </style>
</head>
<body>
    <div id="all">
    <div id="u1"></div>
    <div id="u2"></div>
    </div>
</body>
</html>
不明白红色部分代码的区别，第二段代码u2为何会跑到下面？