CSS margin-top错位求助：.base的外边距为何作用到屏幕顶部？

Emiel Zuurbier提供了有用的回复，我已重写全部代码，当前该问题已解决。

此前的问题详情 #

• CSS里.base类的margin-top没有应用在盒子上方，反而作用到了屏幕最顶部
• 排查确认是使用float导致的问题，但当时不清楚其他实现div对齐的方法

修复后的完整代码 #

HTML代码

<body class="body">
  <h1 class="title">GAME</h1>
  <div class="pb" id="p">
    <button class="play" id="play">play</button>
  </div>
  <div class="game" id="game">
    <div class="side">
      <button class="select">Work</button>
      <button class="select">Workers</button>
      <button class="select">Home</button>
      <button class="select">name</button>
      <button class="select">name</button>
    </div>
    <div class="screen">
      <div class="work">
        <div class="stats" id="stats">stats</div>
        <div class="stuff" id="stuff"></div>
        <div class="base">
          <div class="t1">develop base</div>
          <div class="amt1" id="amt1">lines of code: 0</div>
          <div class="value1" id="value1">value: $0</div>
          <button class="wrk" id="work">work</button>
        </div>
      </div>
      <div class="workers">

      </div>
    </div>
  </div>
</body>

CSS代码

body {
  background: #5A5A5A;
  min-height: 100%;
}

.title {
  background: gray;
  width: 100%;
  height: 5%;
  text-align: center;
}

.pb {
  text-align: center;
}

.play {
  background: gray;
  width: 20%;
  height: 4%;
}

.game {
  max-height: 100vh;
}

.side {
  background: gray;
  float: left;
  height: 75vh;
  width: 20%
}

.screen {
  background: #6A6A6A;
  float: right;
  height: 75vh;
  width: 75%;
}

.stats {
  width: 58vmax;
  background: gray;
  text-align: center;
  font-size: 25px;
  float: left;
}

.select {
  font-size: 3vmax;
  margin-left: 5%;
  background: #6A6A6A;
  height: 15%;
  width: 90%;
  margin-top: 5%;
}

.select:hover {
  background: #5A5A5A;
}

.amt1 {
  margin-top: 2%;
  text-align: center;
  font-size: 2vmax;
}

.base {
  margin-left: 5%;
  margin-top: 5%;
  width: 15vmax;
  height: 15vmax;
  background: red;
  text-align: center;
}

.t1 {
  text-align: center;
  font-size: 2vmax;
}

.value1 {
  margin-top: 2%;
  text-align: center;
  font-size: 2vmax;
}

.wrk {
  height: 3vmax;
  width: 6vmax;
  margin-top: 0.2vmax;
  background: #6A6A6A;
  font-size: 2vmax;
}

.wrk:hover {
  background: #5A5A5A;
}

.stuff {
  width: 14.8vmax;
  height: 31.8vmax;
  background: red;
  float: right;
}

JavaScript代码

play = document.getElementById("play");
game = document.getElementById("game");
work = document.getElementById("work");
stats = document.getElementById("stats");
v1 = document.getElementById("value1");
a1 = document.getElementById("amt1");
var base = {
  lines: 0,
  value: 0,
  text1: "lines of code: ",
  text2: "Value: $"
}
var stat = {
  money: 0,
  level: 0,
  exp: 0,
  need: 0
}
game.style.display = 'none';
play.addEventListener("click", () => {
  play.style.display = 'none';
  game.style.display = '';
});
work.addEventListener("click", () => {
  if (work.innerHTML == "work") {
    work.innerHTML = "stop";
    t1 = setInterval(BW, 1000);
  } else {
    clearInterval(t1);
    work.innerHTML = "work";
  }
});

function BW() {
  base.lines = Math.max(base.lines + 1, 0);
  base.value = Math.max(base.lines * 5, 0);
  a1.innerHTML = base.text1 + base.lines;
  v1.innerHTML = base.text2 + base.value;
}

function update() {
  stats.innerHTML = "Money: " + stat.money + "   " + stat.exp + " / " + stat.exp + "   " + stat.level;
}
upd = setInterval(update, 1000);

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