為什么div重疊？ 沒有浮動，沒有絕對定位

Question

我的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>

Answer 1

這是因為他們沒有任何內容。
如果在每個標簽之間添加一些內容（ <h1> <div> ），它們將有自己的空間。

如果你想制作沒有內容的元素，
你可以添加不間斷的空間  或給出padding或height 。