Html 添加边框会将下一列移动到带边框的列下方

学习HTML和CSS的基础知识。当我向红色的div列添加边框时，绿色的div列会在红色列的下面？ 之前：

之后：

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

下面是第1列和第2列的CSS

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

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

---

添加

框大小：边框框到两个元素。这样一来，盒子的宽度也会影响填充物和边框的厚度


正文{
保证金：0；
}
.详情{
浮动：左；
宽度：20%；
溢出包装：断开单词；
背景颜色：浅珊瑚；
边框：5px纯红；
框大小：边框框；
}
1.工作经历{
浮动：左；
宽度：80%；
边框：5px纯绿色；
框大小：边框框；
}
div{
最小高度：100vh；
}
为了理解正在发生的事情，您需要理解css，长话短说，如果您向元素添加一个1px的边框，它将添加到元素宽度，并将导致元素宽度+2px（1px表示左边框和右边框）

为了避免移动元素时出现问题，您可以先添加边框，然后将其颜色设置为元素的颜色或透明（如果需要）。。另一个选项是使用大纲而不是边框
您好，欢迎使用Stackoverflow。我建议您通过提交最低可行的工作代码来改进您的问题。此外，有关更多信息，请参阅此处。要进一步获取信息，您还可以快速阅读以下内容：请参阅如何提问：使用
框大小：边框框-最好不要使用
浮动
设置瞳孔样式。改用flexbox。浮子不用于设置蛹的样式。这是一个误用的黑客。你说的
用大纲而不是边框是什么意思？轮廓不影响元素的布局，因为边框不知道什么是轮廓，但轮廓如何替换边框？例如，您可以使用broder半径。轮廓与阴影的作用相同，它们不会影响宽度，但会被其他元素隐藏。轮廓线甚至不能完全替代边界。如果问题的解决方案能够以更简单的方式解决，那么为什么要进行如此多的负面交易呢？这取决于用例，看看被问到的问题我在学习时遇到的关于边界的第一个问题是悬停和显示边界，这导致了元素的抖动，所以在这种情况下，我会说大纲比使用border更简单，代码更少，伙计，你为什么要争论呢？问过这个问题的人显然没有看过很多css，他需要阅读更多关于它的内容，仅仅写“这是解决方案”不会帮助他，是的，他会得到想要的效果，但他可能不会理解。另外，很高兴知道还有另一种方法。。没有最好的办法，这完全取决于情况和需求。是的，我已经把一个盒子模型的链接，包括盒子大小，这样他就可以看到它是如何工作的，而不是“这里加这个那里”。非常感谢。现在可以了。我一直在试图弄清楚这是一个保证金问题还是填补问题。