修復 HTML5 浮動問題

Question

當我同時使用邊、節和頁腳時，我在節上使用“浮動：左”，頁腳的行為就像它的“位置：絕對”一樣，繞過邊和節並轉到頁面頂部，即使我不這樣做'沒有在 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 浮動問題

問題描述

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