为何设置height为100%后内容仍溢出body？

向<body>中添加更多图片时，内容溢出导致<footer>显示异常。已尝试设置html的height为100%、body的min-height为100%，以及全局box-sizing: border-box，但问题仍未解决。期望所有图片都被<body>容纳，body高度随内容自动调整。

核心问题是浮动元素未清除浮动：<image-container>内的图片使用了float: right，浮动元素会脱离正常文档流，导致父容器<section class="center">无法被撑开高度，进而让footer位置错乱，内容出现溢出。另外，html设置固定height: 100%会限制文档高度，无法随内容自然延伸。

1. 移除html的height: 100%设置，解除文档高度限制
2. 给<image-container>添加伪元素清除浮动，让父容器正确包裹所有浮动图片
3. 将body的min-height: 100%改为min-height: 100vh，更可靠地保证页面至少占满视口高度

CSS代码 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  min-height: 100vh; /* 用100vh替代100%，适配视口高度 */
  padding: 0;
  font-family: Arial, sans-serif;
  color: black;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 1rem;
}

h1 {
  font-size: 2.5rem;
  margin: 0;
  color: #fff;
  font-style: italic;
  font-weight: bold;
}

.menu-icon { /* 修正原错误选择器header.menu-icon，改为正确的.menu-icon */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2rem;
  border-radius: 3px;
  cursor: pointer;
}

.menu-icon div {
  width: 35px;
  height: 5px;
  background-color: white;
  margin: 6px 0;
  cursor: pointer;
}

.center {
  margin: auto;
  width: 50%;
  padding: 10px;
  text-align: center;
}

.ticket-title {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 2rem;
  padding: 10px;
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;

}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 1rem 2rem;
  font-weight: bold;
  font-size: 1.5rem;
  text-transform: uppercase;
  cursor: pointer;
  background-color: rgba(255, 0, 0, 0.5);
}

.ticket-price {
  font-size: 24px;
  font-weight: bold;
}

.ticket-location {
  font-weight: bold;
  font-size: 24px;
}

.ticket-start {
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: lighter;
}

.image-container div {
  padding: 5px;
}

.image-container img {
  display: block;
  width: 70%;
}

/* 伪元素清除浮动，让image-container正确包裹所有浮动图片 */
.image-container::after {
  content: "";
  display: table;
  clear: both;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 1rem;
}

.footer-nav {
  margin-top: 10px;
  margin-left: 10%;
  text-align: left;
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 20px;
}

.footer-nav a:hover {
  text-decoration: underline;
}

li {
  display: inline;
}

.fa {
  padding: 20px;
  text-align: center;
  margin: 5px 2px;
  font-size: 30px;
  width: 50px;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-spotify {
  background: green;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

HTML代码 #

<header>
  <div>
    <h1>Elektrik Eel</h1>
  </div>
  <span class="menu-icon">
    <div></div>
    <div></div>
    <div></div>
  </span>
</header>
<section class="center">
  <div class="ticket-title">Tickets</div>
  <div class="button-container">
    <button class="button">Book now</button>
  </div>
  <div class="ticket-price">
    <p>
      Early bird: $205 (3 days)<br>
      Full price: $340 (3 days)<br>
      Single day; $110
    </p>
  </div>
  <div class = "ticket-location-container">
    <div class = "ticket-location">
      <div>Adelaide</div>
      <p class="ticket-start">
        November 11th<br>
        Victoria Square<br>
        Starts 8pm
      </p>
    </div>
    <div class = "ticket-location">
      <div>Sydney</div>
      <p class="ticket-start">
        November 15th<br>
        Opera on Sydney Harbour<br>
        Starts 8pm
      </p>
    </div>
    <div class = "ticket-location">
      <div>Melbourne</div>
      <p class="ticket-start">
        November 20th<br>
        Melbourne Park<br>
        Starts 8pm
      </p>
    </div>
    <div>
      <p>
        Engage your senses and<br>
        become immersed in an<br> 
        electrifying aural universe
      </p>
    </div>
  </div>
  <div class="image-container">
    <img src="cat.jpg" style="float: right; margin: 5%;" >
    <img src="cat.jpg" style="margin: 5%;">
    <img src="cat.jpg" style="float: right"> 
  </div>
  <!--
  <div class="button-container">
    <button class="button">Buy tickets</button>
  </div>
  -->
</section>
<footer>
  <div>
    <nav class="footer-nav">
      <a href="#">Artists</a><br>
      <a href="#">Locations</a><br>
      <a href="#">Merch</a><br>
      <a href="#">About</a><br>
      <a href="#">Contact</a>
    </nav>
  </div>
  <ul>
    <li>   
      <a href="#" class="fa fa-facebook"> </a>   
    </li>  
    <li>   
      <a href="#" class="fa fa-instagram"> </a>   
    </li>  
    <li>   
      <a href="#" class="fa fa-spotify"> </a>   
    </li>  
    <li>   
      <a href="#" class="fa fa-youtube"> </a>   
    </li>
  </ul>  
</footer>

内容的提问来源于stack exchange，提问作者Tri Dong