Html 为什么当我将float:right置于时，它会下降？

我想把购物车放到页面的右上角。当我添加float时，它会下降。为什么？我把代码和图像放在有浮点数和没有浮点数的地方

* { 保证金：0； } 佛罗里达州{ 背景色：fff； 填充：10px； 颜色：透明； 字体大小：20px； 高度：60px； 边缘顶部：100px； 文本对齐：居中； 线高：60px； 宽度：70%； 左边距：自动； 右边距：自动； 不透明度：0.8； 左边框：5px纯黑； 字体系列：“Nanum哥特式”，无衬线； } 日志{ 高度：60px； 边缘顶部：2倍； } 容器{ 宽度：70%； 高度：70像素； 背景色：RGBA1112501710.5； 盒影：1px 1px 2px黑色； 边缘顶部：20px； 显示器：flex； 证明内容：中心； 左边距：自动； 右边距：自动； 弯曲方向：行反向； } 推车{ 字体大小：30px； 浮动：对； 高度：40px； } 运货马车 今天购买独家ONDRIWATER 400毫升只需200分钟$

---

当您使元素浮动时，下一个id=fl将成为第一个流入元素，其顶部边距将与容器主体的顶部边距一起塌陷。就像你把容器的顶部边距增加了 边缘顶部：100px；由于浮动元素的放置考虑到了这一点，元素将跳转到它的新位置

要避免这种情况，请执行以下操作：

* { 保证金：0； } 身体{ 垫面：1px； } 佛罗里达州{ 背景色：fff； 填充：10px； 颜色：透明； 字体大小：20px； 高度：60px； 边缘顶部：100px； 文本对齐：居中； 线高：60px； 宽度：70%； 左边距：自动； 右边距：自动； 不透明度：0.8； 左边框：5px纯黑； 字体系列：“Nanum哥特式”，无衬线； } 日志{ 高度：60px； 边缘顶部：2倍； } 容器{ 宽度：70%； 高度：70像素； 背景色：RGBA1112501710.5； 盒影：1px 1px 2px黑色； 边缘顶部：20px； 显示器：flex； 证明内容：中心； 左边距：自动； 右边距：自动； 弯曲方向：行反向； } 推车{ 字体大小：30px； 浮动：对； 高度：40px； } 运货马车 今天购买独家ONDRIWATER 400毫升只需200分钟$

---

在您的代码车是顶部和右侧您的页面！ 所以，你可以使用绝对位置，比如：

#cart {
  font-size: 30px;
  right: 0;
  top:0;
  height: 40px;
  position:absolute;
}

文本对齐：右，而不是浮动：右。浮动样式将使笛卡尔元素与fl对齐。注意：标记不使用，也不需要闭合斜杠，而且从不使用闭合斜杠。