Html CSS浮动，如何将长方体移动到另一个下方？

我有很多麻烦。我试图创建一个游戏，但遇到了一个浮动元素的问题。蓝色的盒子是玩家的化身，红色的盒子是hp和其他统计数据，白色的盒子是一个聊天区，用来讨论游戏中发生的事情。我遇到的问题是，前3个红色方框向左浮动。我想让它们漂浮在另一个下面，这样看起来像一个垂直的柱，而不是水平的柱，但唯一的方法是让漂浮的盒子接触到我的容器盒子的边缘。有没有办法说，白框有点像边缘，它应该向下移动一个点，这样就可以创建一个垂直柱？谢谢

CSS 主体{ 保证金：自动； 边框：1px实心665544； 背景色：rgb200,0,0； 高度：850px； 宽度：960px； } 上身{ 浮动：左； 保证金：自动； 背景色：RGB0200,0； 高度：400px； 宽度：960px； } 聊天室{ 边框：1px实心665544； 背景色：rgb255、255、255； 高度：300px； 宽度：350px； 利润率：20px； 溢出：隐藏； } 用户容器{ 浮动：左； 边框：1px实心； 背景色：rgb255、255、255； 高度：200px； 宽度：200px； 保证金：20px 10px 10px 20px； 溢出：隐藏； } 用户映像{ 背景色：RGB0255255； 高度：200px； 宽度：200px； } 用户HP{ 浮动：左； 边框：1px实心； 背景色：rgb200、20、50； 高度：50px； 宽度：50px； 保证金：5px； 清楚:对,； } 乌瑟玛纳{ 浮动：左； 边框：1px实心； 背景色：rgb200、20、50； 高度：50px； 宽度：50px； 保证金：5px； 清楚:对,； } 用户能源{ 浮动：左； 边框：1px实心； 背景色：rgb200、20、50； 高度：50px； 宽度：50px； 保证金：5px； } 灌肠容器{ 浮动：左； 边框：1px实心； 背景色：rgb255、255、255； 高度：200px； 宽度：200px； 保证金：20px 20px 10px 10px； 溢出：隐藏； } 灌肠图像{ 背景色：RGB0255255； 高度：200px； 宽度：200px； } 灌肠HP{ 浮动：左； 边框：1px实心； 背景色：rgb200、20、50； 高度：50px； 宽度：50px； 保证金：5px； } 艾尼米玛纳{ 浮动：左； 边框：1px实心； 背景色：rgb200、20、50； 高度：50px； 宽度：50px； 保证金：5px； } 能量学{ 浮动：左； 边框：1px实心； 背景色：rgb200、20、50； 高度：50px； 宽度：50px； 保证金：5px；

---

} 您需要将三个红色框包装在浮动包装中，请尝试以下操作：

主体{ 保证金：自动； 边框：1px实心665544； 背景色：rgb200,0,0； 高度：850px； 宽度：960px； } 上身{ 浮动：左； 保证金：自动； 背景色：RGB0200,0； 高度：400px； 宽度：960px； } 聊天室{ 边框：1px实心665544； 浮动：左； 背景色：rgb255、255、255； 高度：300px； 宽度：300px； 利润率：20px； 溢出：隐藏； } 用户容器{ 浮动：左； 边框：1px实心； 背景色：rgb255、255、255； 高度：200px； 宽度：200px； 保证金：20px 10px 10px 20px； 溢出：隐藏； } 用户映像{ 背景色：RGB0255255； 高度：200px； 宽度：200px； } 用户HP{ 浮动：左； 边框：1px实心； 背景色：rgb200、20、50； 高度：50px； 宽度：50px； 保证金：5px； 清楚:对,； } 乌瑟玛纳{ 浮动：左； 边框：1px实心； 背景色：rgb200、20、50； 高度：50px； 宽度：50px； 保证金：5px； 清楚:对,； } 用户能源{ 浮动：左； 边框：1px实心； 背景色：rgb200、20、50； 高度：50px； 宽度：50px； 保证金：5px； } 灌肠容器{ 浮动：左； 边框：1px实心； 背景色：rgb255、255、255； 高度：200px； 宽度：200px； 保证金：20px 20px 10px 10px； 溢出：隐藏； } 灌肠图像{ 背景色：RGB0255255； 高度：200px； 宽度：200px； } 灌肠HP{ 浮动：左； 边框：1px实心； 背景色：rgb200、20、50； 高度：50px； 宽度：50px； 保证金：5px； } 艾尼米玛纳{ 浮动：左； 边框：1px实心； 背景色：rgb200、20、50； 高度：50px； 宽度：50px； 保证金：5px； } 能量学{ 浮动：左； 边框：1px实心； 背景色：rgb200、20、50； 高度：50px； 宽度：50px； 保证金：5px； } .包装纸{ 宽度：65px； 浮动：左； }

---

如果希望它们垂直堆叠，为什么要浮动它们？将它们作为块元素要容易得多。