如何将按钮移至父div右下角？为何float:right会让按钮溢出容器？

为什么float: right会导致按钮移出父容器 #

遇到的错位本质是浮动的固有特性导致的：

• 浮动的最初设计目的是实现文字环绕图片的排版效果，并不是用来做元素的位置对齐的，用它做布局本身就容易触发异常
• 浮动元素会部分脱离普通文档流，不会参与父容器的高度计算：当前的.color父容器上下内边距为0，不浮动时.btn是普通流内的块级元素，会带着自身高度、上下margin把父容器的垂直高度撑出来，按钮自然在容器内部；一旦给.btn添加float: right，父容器只会统计内部h1、四个p标签的高度，浮动按钮的高度不再为父容器贡献高度
• 浮动元素的定位基准是父容器内容区的顶边，不会自动对齐父容器底部，这时候父容器根本没给浮动按钮预留垂直方向的空间，视觉上就会出现按钮“漂出容器”的效果，本质是浮动引发的高度塌陷错位

两种稳定的右下角定位实现方案 #

.color父容器已经配置了position: relative，不需要调整原有基础样式，直接追加规则即可实现目标：

方案1：绝对定位（适合内容高度固定场景） #

给按钮容器.btn添加绝对定位规则：

.color .btn {
  position: absolute;
  /* 和父容器30px的左右内边距对齐，避免按钮贴边错位 */
  right: 30px;
  /* 适配原有按钮的底部间距 */
  bottom: 10px;
}

• 优势：按钮会严格锚定在父容器右下角内部，不受其他元素排版影响，不会触发浮动类的塌陷问题
• 注意：如果后续父容器内的内容高度持续增加，绝对定位的按钮可能会和上方内容重叠，这种场景更适合用Flex布局方案

方案2：纵向Flex布局（适合动态内容场景） #

在不改变原有样式的基础上，给父容器追加Flex布局规则，让按钮自动待在内容流末尾的靠右位置：

.color {
  /* 原有样式全部保留，新增以下规则 */
  display: flex;
  flex-direction: column;
}
.color .btn {
  /* 让按钮沿容器右侧对齐 */
  align-self: flex-end;
  /* 把按钮推到所有普通流内容的最下方 */
  margin-top: auto;
  /* 适配原有按钮的底部间距 */
  margin-bottom: 10px;
}

• 优势：按钮永远处于所有普通流内容的下方靠右位置，不会和其他内容重叠，不需要手动计算偏移量，能自动适配内容高度变化

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