HTML表格无法显示在列表下方 添加margin-top连带下移内容如何解决

问题原因 #

你页面中承载游戏列表、电影列表的两个容器都设置了浮动属性（分别为float: left、float: right），浮动元素会脱离标准文档流，后续的表格元素无法识别到前方浮动元素的占位高度，所以会直接排布在页面顶部。你手动给表格加margin-top的方案相当于硬挪位置，自然会连带后面的所有内容一起下移，不是合理的解决方案。

修复方案 #

你只需要给表格添加clear: both属性，清除两侧浮动的影响即可。同时原代码里的表格表头语法存在错误，也同步做了修正，修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>HTML Project</title>
  <style>
    ol {
      text-align: center;
      z-index: 3;
      position: relative;
      opacity: .99;
      list-style-type: none;
    }
    img {
      width: 200px;
      height: 128px;
    }
    ul {
      text-align: center;
      z-index: 3;
      position: relative;
      opacity: .99;
      list-style-type: none;
    }
    /* 新增表格样式，清除浮动影响 */
    table {
      clear: both;
      /* 可按需调整margin值修改表格和上方内容的间距 */
      margin: 0 100px;
    }
  </style>
</head>
<body>
  <div style="width: 500px; float:left; height:500px; margin:100px">
    <h1>My favorite games</h1>
    <br><br>
    <ol style="float:left">
      <li>Arma 3 - <a href="https://en.wikipedia.org/wiki/ARMA_3"> HERE</a></li>
      <br>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/ArmA_3_Logo_%28Black_Transparent%29_%28SVG%29.svg/1200px-ArmA_3_Logo_%28Black_Transparent%29_%28SVG%29.svg.png" />
      <br>
      <li>World of Tanks - <a href="https://en.wikipedia.org/wiki/World_of_Tanks"> HERE</a></li>
      <br>
      <img src="https://o.remove.bg/downloads/2ef36636-4f93-4e6b-a514-6e14b62670b3/World-of-Tanks-Logo-removebg-preview.png" />
      <br><br>
      <li>Grand Theft Auto V - <a href="https://en.wikipedia.org/wiki/Grand_Theft_Auto_V"> HERE</a></li>
      <br>
      <img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
      <br>
      <li>Counter Strike: Global Offense - <a href="https://en.wikipedia.org/wiki/Counter-Strike:_Global_Offensive"> HERE</a></li>
      <br>
      <img src="https://www.vippng.com/png/full/62-621853_counter-strike-global-offensive-2-logo-black-and.png" />
      <br><br>
      <li>Digital Combat Simulator World - <a href="https://en.wikipedia.org/wiki/Digital_Combat_Simulator"> HERE</a></li>
      <img src="https://o.remove.bg/downloads/be1dcb6f-0a71-4d4a-a647-553fda3dce23/il_570xN.2519210705_9zed-removebg-preview.png" />
    </ol>
  </div>
  <div style="width: 500px; float:right; height:500px; margin:100px">
    <h1>My favorite movies</h1>
    <br><br>
    <ul style="float:left">
      <li>Ant-Man - <a href=""> HERE</a></li>
      <br>
      <img src="https://o.remove.bg/downloads/28ee2a8a-99b6-43f5-b497-9b91da9328c6/s-l640-removebg-preview.png" style="width:250px" />
      <br>
      <li>Deadpool - <a href=""> HERE</a></li>
      <br>
      <img src="https://o.remove.bg/downloads/bb200f2d-93d0-414d-8128-e22bd7849f02/Deadpool-poster-removebg-preview.png" />
      <br><br>
      <li>Jurassic Park - <a href=""> HERE</a></li>
      <br>
      <img src="https://o.remove.bg/downloads/ac0743ca-d015-41de-8ab5-a2f9c2868850/Jurassic_Park__franchise_logo_-removebg-preview.png" />
      <br>
      <li>Jurassic World - <a href=""> HERE</a></li>
      <br>
      <img src="https://o.remove.bg/downloads/3473a625-97ec-4eb7-9c7b-be175cb6af2a/jurassicworldlogo-removebg-preview.png" />
      <br><br>
      <li>Curious George - <a href=""> HERE</a></li>
      <img src="https://o.remove.bg/downloads/1ccc478a-eac9-4ec4-a953-44d6a6de704e/Curious-George-Logo-clipart-removebg-preview.png" />
    </ul>
  </div>
  <table>
    <tr>
      <th>Game</th>
      <th>Publisher(s)</th>
      <th>Release Date</th>
      <th>Platform(s)</th>
    </tr>
    <tr>
      <td>Arma 3</td>
      <td>Bohemia Interactive</td>
      <td>September 12, 2013</td>
      <td>Microsoft Windows | macOS</td>
    </tr>
  </table>
</body>
</html>

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