DIV 三欄佈局最佳實踐：浮動清除與場景選型

兩種常見寫法對比

方式一：全左浮動

<div style="float:left">左</div>
<div style="float:left">中</div>
<div style="float:left">右</div>

方式二：左右浮動嵌套

<div style="float:left">左</div>
<div style="float:right">
  <div style="float:left">中</div>
  <div style="float:right">右</div>
</div>

專家推薦：父容器清浮動 + 方式一

<div style="zoom:1; overflow:hidden">  /* 清浮動觸發 BFC */
  <div style="float:left">左</div>
  <div style="float:left">中</div>
  <div style="float:left">右</div>
</div>

• overflow:hidden 觸發 BFC 包含浮動子元素，高度自適應。
• zoom:1 兼容 IE6/7 觸發 hasLayout。
• 結構簡單、語義清晰、易維護。

場景選型建議

現代替代方案

Flexbox / Grid 佈局已全面普及，新項目首選：

.container { display: flex; }
.left { width: 200px; }
.center { flex: 1; }
.right { width: 200px; }

零浮動、零清浮動、完美自適應，IE10+ 全支持。