經典聖杯佈局簡化版:左欄固定寬浮動,右欄觸發 BFC 自動填滿剩餘寬度,外層 clearfix 清除浮動實現等高。
.container { overflow: hidden; /* 或 clearfix */ }
.left { float: left; width: 100px; background: #399521; }
.right { overflow: hidden; background: #39A4DC; } /* 觸發 BFC */
右欄 overflow: hidden 建立 BFC,不會與左浮動重疊,自動佔據剩餘空間,且隨內容撐高容器,配合容器背景色視覺上等高。