CSS 盒模型佈局：讓兩個子盒子在父盒子中右側垂直堆疊

目標

在一個寬度固定的父容器中，兩個子元素**靠右對齊、上下堆疊**（第一個在上，第二個在下）。

方案一：Flexbox（現代首選，代碼最少）

.parent {
    display: flex;
    flex-direction: column;  /* 垂直堆疊 */
    align-items: flex-end;   /* 靠右對齊 */
    width: 400px;            /* 父容器寬度 */
    border: 1px solid #ccc;
}
.child {
    margin: 10px 0;          /* 垂直間距 */
    padding: 10px;
    background: #e0e0e0;
}

<div class="parent">
  <div class="child">盒子 1（上）</div>
  <div class="child">盒子 2（下）</div>
</div>

方案二：Float + Clear（傳統兼容方案）

.parent {
    width: 400px;
    border: 1px solid #ccc;
    overflow: hidden;  /* 清除浮動，撐開高度 */
}
.child {
    float: right;      /* 靠右浮動 */
    clear: right;      /* 強制換行，實現垂直堆疊 */
    margin: 10px 0;
    padding: 10px;
    background: #e0e0e0;
}

關鍵點：clear: right 讓後續同向浮動元素強制換行，配合 float: right 實現「右側垂直堆疊」。父容器需觸發 BFC（如 overflow:hidden）包裹浮動子元素。

方案三：Absolute 定位（精確控制位置）

.parent {
    position: relative;
    width: 400px;
    height: 200px;  /* 需固定高度 */
}
.child {
    position: absolute;
    right: 0;       /* 靠右 */
    width: 150px;
}
.child:nth-child(1) { top: 0; }      /* 第一個頂部 */
.child:nth-child(2) { bottom: 0; }   /* 第二個底部，或 top: 80px 固定間距 */

響應式適配建議

• 父容器用 max-width: 100% + margin: 0 auto 居中。
• 子元素寬度用百分比或 max-width 限制。
• 間距用 gap (Flex/Grid) 或 rem 相對單位。
• 極窄螢幕下用媒體查詢切換為 flex-direction: column; align-items: stretch 佔滿寬度。

選型指南

Flexbox 一行 align-items: flex-end 解決右對齊，配合 flex-direction: column 完美實現「右側垂直堆疊」，是當前最佳實踐。