html - 如何在没有绝对位置和 float 的情况下将 div 定位到容器的右端？

Question

是否可以在不使用绝对位置和 float 的情况下将 div 定位到容器的右侧？每当我使用 float:right 或 position: absolute 时，容器都不知道 float 或定位元素的内容高度，这会导致布局问题。

我尝试为 float 或定位元素设置固定高度，然后将 padding-bottom 添加到 float 或定位元素的高度。

.container{
  padding-bottom: 20px;
}

.container .float_right{
   float: right;
   height: 20px;
}

尽管没关系，但我正在寻找比这更好的解决方案。这里的任何人都可以告诉我是否有其他解决问题的方法吗？

Answer 1

只需将overflow: hidden; 添加到.container, read more here

.container{
  padding-bottom: 20px;
  overflow: hidden;
}

.container .float_right{
   float: right;
   height: 20px; /* no longer necessary */
}

我保留了 padding-top 和 height 样式，以便查看 overflow: hidden; 的效果。不需要固定高度。

codepen