为什么div重叠？没有浮动，没有绝对定位答案

【问题标题】：Why are divs overlapping? No floats, no absolute positioning为什么div重叠？没有浮动，没有绝对定位
【发布时间】：2022-01-04 00:49:15
【问题描述】：

我的date-time-container 在移动设备中垂直调整大小时与welcome 和weather 的上部元素重叠。我没有任何绝对定位的元素，我没有使用浮点数，我已将它们设为块级元素，并且还添加了清晰：两者，但它们仍然重叠。知道为什么会这样吗？

  @media screen and (max-width: 960px) {
  body {
    max-width: 100vw;
    max-height: 100%;
    overflow: hidden;
  }
  #weather {
    display: flex;
    position: relative;
    clear: both;
    justify-content: center;
    width: 100vw;
    height: auto;
    padding-right: 6%;
  }
  #loc-des {
    padding-right: 5%;
    display: block;
    height: auto;
  }
  #welcome {
    position: relative;
    height: auto;
    text-align: center;
    margin: 5% auto 0 auto;
    clear: both;
  }
  #main-container {
    max-width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #date {
    position: relative;
    display: block;
    font-size: 1.3em;
    margin-bottom: 3%;
    clear: both;
  }
  #time {
    position: relative;
    display: block;
    clear: both;
  }
  #date-time-container {
    display: block;
    position: relative;
    clear: both;
    height: auto;
  }
  #time-container {
    display: block;
    position: relative;
    margin: 0 auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    clear: both;
  }

<h1 id="welcome"></h1>
<div id="weather">
  <div id="loc-des">
    <div id="location"></div>
    <div id="description"></div>
  </div>
  <h1 id="temp"></h1>
</div>

<main id="main-container">
  <section id="time-container">
    <section id="date-time-container">
      <h2 id="time">00:00</h2>
      <span id="date"></span>
    </section>

    <form action="https://www.duckduckgo.com/" target="_blank" autocomplete="off">
      <input type="search" name='q' id='search-bar' placeholder="search with duckduckgo ...">
    </form>
  </section>

【问题讨论】：

这需要一个可运行的sn-p minimal reproducible example。
至少，你必须给他们一个空白的 HTML 字符作为内容：<h1>&nbsp;</h1>。如果没有内容，它们的计算高度将为0px。
另请注意，您的更新不会显示问题。它只是渲染一些没有“重叠”的东西。

标签： javascript html css position css-position

【解决方案1】：

这是因为他们没有任何内容。
如果在每个标签之间添加一些内容（<h1><div>），它们就会有自己的空间。

如果你想制作没有内容的元素，
您可以添加不间断空格&nbsp; 或提供padding 或height。

【讨论】：