[当我同时使用aside，section和footer，并且在该部分上使用“ float：left”时，页脚的行为就像它的“ position：absolute”，并且绕过aside和section并转到页面顶部，即使我在CSS中没有指定任何职位。另外，该部分占据了整个页面，重叠在一起。我使用HTML5还是将所有内容恢复为div和id都没有关系，结果是相同的。
我在做什么错？为什么这样做呢？以及如何解决？
我的CSS：
aside {
padding: 2%;
min-height: 863px;
width: 10%;
float: left;
}
section {
padding: 2%;
width: 80%;
float:left;
}
footer {
height: 80px;
padding: 2%;
background: lightblue;
}
我的HTML：
<aside>
<p>This is the aside</p>
</aside>
<section>
This is the section
</section>
<footer>
This is the footer
</footer>
float: ...用于将文本环绕在图像上，并且过度用于布局目的。您可以在页脚上拍一个clear: both;并将其命名为一天（此外，除了百分比宽度外，您的填充也在增加宽度-添加* {box-sizing: border-box;}）。
近代，display: flex;是必经之路...
HTML
<body>
<main-section>
<aside>
<p>This is the aside</p>
</aside>
<section>
This is the section
</section>
</main-section>
<footer>
This is the footer
</footer>
</body>
CSS
body {
display: flex;
flex-flow: column;
}
aside {
min-height: 863px;
flex: 1;
}
main-section {
display: flex;
}
section {
flex: 8;
}
footer {
background: lightblue;
height: 80px;
}