clear: both;的新手问题，为啥后面元素清除不了

css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div>div{
            float: left;
        }
        div#d3{
            clear: both;
        }
    </style>
</head>
<body>
    <div>
        <div id="d1">d1</div>
        <div id="d2">d2</div>
        <div id="d3">d3</div>
        <div id="d4">d4</div>
    </div>
</body>
</html>

为啥最后显示：
d1d2
d3d4
clear: both;不是清除2侧吗？
我觉得应该显示：

d1d2
d3
d4
老师给讲讲为啥不是我想的这样？谢谢啦~！

https://bbs.csdn.net/topics/392699233


```<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <script src="../resource/vue.min.js"></script>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>defaultvue</title>
        <style type="text/css">
        div>div{
            float: left;
        }

    </style>
  </head>
  <body>
    <div>
        <div id="d1">d1</div>
        <div id="d2">d2</div>
                <div style="clear:both;"></div>
        <div id="d3">d3</div>
                <div style="clear:both;"></div>
        <div id="d4">d4</div>
    </div>

  </body>
</html>

清除浮动的时候必须把前后的浮动都清楚掉，才能保证不会受到其它浮动的影像