修复 HTML5 个浮动问题

Question

当我同时使用 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>

Answer 1

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;
}

修复 HTML5 个浮动问题

Fix HTML5 floating issues

html

css

position