float为什么要设置两次

 <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
    <meta charset="utf-8" />
</head>
<body>
    <div id="q"></div>
    <div id="w"></div>
    <div id="e"></div>

</body>
</html>
下面是css代码
body {
    margin:0;
    padding :0;
}
#q {
    background-color:#888484;
    margin-left:0px;
    width:15%;
    height:700px;
    float:left;
}
#w {
    width:85%;
    height:50px;
    background-color:#808080;
    float:left;
}

为什么要设置两次下面的框才会浮动到上面，只设置#w是不会浮上去的
是有什么原理吗？

后面的元素才会受到影响，前面的不会

流式布局，某个标签设置了float 之后表示下一个标签要要按照此标签的布局所以就此题应该只需要设置 #q