添加边框将下一列移到有边框的列的下方

Question

学习HTML和CSS的基础知识。当我为红色的div列添加边框时，绿色的div列会位于红色列的下方？before：添加边框前

after：添加边框后

尝试删除填充或边距，但结果相同。

下面是column1和Column2的CSS。

 .details {
     float: left;
    width: 20%;
    overflow-wrap: break-word;
    background-color: lightcoral;
}

.workhistory {
    float: left;
    width: 80%;
}

Answer 1

将box-sizing:border-box；添加到这两个元素中。这样，方框宽度将使页数和边框厚度同时生效。

null

body {
  margin: 0;
}

.details {
  float: left;
  width: 20%;
  overflow-wrap: break-word;
  background-color: lightcoral;
  border: 5px solid red;
  box-sizing: border-box;
}

.workhistory {
  float: left;
  width: 80%;
  border: 5px solid green;
  box-sizing: border-box;
}

div {
  min-height: 100vh;
}

<div class="details"></div>
<div class="workhistory"></div>