使用float:right时，不借助position:absolute如何将div定位到底部？

方法1：Flexbox布局（推荐） #

通过flex布局的自动margin特性实现底部定位，同时用align-self替代float:right的靠右效果：

/* 父容器样式 */
.parent-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 需给父容器设置高度，比如占满视口 */
}

/* 目标div样式 */
.bottom-div {
  margin-top: auto; /* 自动顶开上方空间，固定在底部 */
  align-self: flex-end; /* 实现靠右对齐，替代float:right */
}

方法2：Grid布局 #

利用网格的自对齐属性，同时实现底部+靠右：

/* 父容器样式 */
.parent-container {
  display: grid;
  min-height: 100vh;
}

/* 目标div样式 */
.bottom-div {
  justify-self: end; /* 水平方向靠右 */
  align-self: end; /* 垂直方向靠底 */
}

方法3：兼容旧浏览器的margin偏移法 #

如果需要兼容不支持flex/grid的环境，可以结合父容器padding和子元素负margin保留float:right：

/* 父容器样式 */
.parent-container {
  min-height: 100vh;
  padding-bottom: 40px; /* 值等于底部div的高度 */
}

/* 目标div样式 */
.bottom-div {
  float: right;
  height: 40px;
  margin-bottom: -40px; /* 负margin拉到底部 */
}

内容的提问来源于stack exchange，提问作者Rob