修复 HTML5 浮动问题

Question

When I use aside, section, and footer together, and I use "float:left" on the section the footer acts like it's "position:absolute" and bypasses both aside and section and goes to the top of the page even though I don't have any positions designated in CSS.当我同时使用边、节和页脚时，我在节上使用“浮动：左”，页脚的行为就像它的“位置：绝对”一样，绕过边和节并转到页面顶部，即使我不这样做'没有在 CSS 中指定任何位置。 Additionally, the section takes up the entire page, overlapping aside.此外，该部分占据了整个页面，重叠在一起。 It doesn't matter if I use HTML5, or revert everything back to divs and ids, the result is the same.无论我使用 HTML5，还是将所有内容恢复为 div 和 id，结果都是一样的。

What am I doing wrong?我究竟做错了什么？ Why is it doing that?为什么要这样做？ and how do I fix it?我该如何解决？

My CSS:我的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;
 }

My HTML:我的 HTML：

    <aside>
       <p>This is the aside</p>
    </aside>
    <section>
        This is the section
    </section>
    <footer>
      This is the footer
    </footer>

Answer 1

float: ... was intended for wrapping text around an image and overused for layout purposes. float: ...用于在图像周围环绕文本并过度用于布局目的。 You could slap a clear: both;你可以说clear: both; on the footer and call it a day (also your padding is adding width in addition to your percentage widths - add * {box-sizing: border-box;} ).在页脚上并称它为一天（除了百分比宽度之外，您的填充还会增加宽度 - 添加* {box-sizing: border-box;} ）。

For modern times, display: flex;对于现代， display: flex; is the way to go...是要走的路吗...

HTML 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 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 浮动问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-12-15 04:35:53

修复 HTML5 浮动问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-12-15 04:35:53

解决方案1
1 已采纳 2019-12-15 04:35:53