CSS如何实现将按钮定位到div容器的右下角

padding-bottom、margin-bottom没生效是两个结构问题导致的：

• 按钮和红色.box是平级兄弟元素，默认排在红框下方，不在红框的布局上下文内，调整边距没法把它挪到红框范围内
• 外层.container是flex纵向布局，子元素按纵向流排列，你写的float: right对flex子项无效，只能让按钮在自身所在行靠右，没法对齐到红框位置

用父相子绝的定位方案实现，改动量最小，适配性最好：

1. 调整HTML结构，把按钮容器移到.box内部
2. 给.box加相对定位作为定位基准，按钮容器设置绝对定位钉在右下角即可

完整可运行代码：

.container {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 200px;
  border: 1px solid blue;
  padding: 8px;
}

.box {
  position: relative;
  width: 300px;
  height: 150px;
  border: 1px solid red;
}

.button-wrap {
  position: absolute;
  right: 8px;
  bottom: 8px;
}

<div class="container">
  <div class="box">
    <div class="button-wrap">
      <button class="button">Click</button>
    </div>
  </div>
</div>

代码里的right和bottom值可以根据你需要的边距自行调整。

如果不想调整HTML结构，也可以给按钮所在的div设置负margin-top把元素往上拉到红框底部位置，同时设置文本右对齐，但这种方案强依赖红框的固定高度，后续如果改红框尺寸必须同步修改负边距值，维护成本高，不推荐使用。

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