修复HTML5浮动问题_Html_Css_Position

修复HTML5浮动问题

html css

修复HTML5浮动问题,html,css,position,Html,Css,Position,当我同时使用侧边、节和页脚，并且在节上使用“float:left”时，页脚就像“position:absolute”一样，绕过侧边和节，进入页面顶部，即使我没有在CSS中指定任何位置。此外，该部分占据了整个页面，重叠在一边。无论我使用HTML5，还是将所有内容恢复为div和id，结果都是一样的我做错了什么？它为什么这样做？我该如何修复它我的CSS： aside { padding: 2%; min-height: 863px; width: 10%;

当我同时使用侧边、节和页脚，并且在节上使用“float:left”时，页脚就像“position:absolute”一样，绕过侧边和节，进入页面顶部，即使我没有在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>


这是旁白
这是一节
这是页脚

浮点：…

用于在图像周围包装文本，并过度用于布局目的。你可以把一个

清除：两个都清除，并结束一天（此外，您的填充在百分比宽度的基础上增加了宽度-添加*{box size:border box；}
）
对于现代，display:flex是要走的路
HTML
如果您不想向下移动，您可以尝试定义清除：两者在上面。问题是为什么您首先需要对这些元素使用float？我的意思是，如果你定义它们占100%或更少，它们将并排排列。
<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>

body {
  display: flex;
  flex-flow: column;
}

aside {
  min-height: 863px;
  flex: 1;
}

main-section {
  display: flex;
}

section {
  flex: 8;
}

footer {
  background: lightblue;
  height: 80px;
}