如何實現三列布局，中間寬度自適應，兩邊定寬。以及雙飛翼佈局與聖盃佈局。

三列中間寬度自適應的佈局是常常須要的。

聖盃佈局能實現三列中間寬度自適應，可是並不是最佳實踐。

聖盃佈局的要求是

• 三列布局，中間寬度自適應，兩邊定寬；
• 中間欄要在瀏覽器中優先展現渲染；
• 容許任意列的高度最高；

具體實現網上右不少文章了，雙飛翼佈局也是爲了這個目的，在聖盃佈局上改動的。

在不少狀況不須要中間優先展現渲染。好比不少網站第一行都是 左：熱點新聞、中：最近更新、右：經常使用連接，重要性最高不是中間。還有隻是爲了佈局不是爲了內容，好比填的一些表單。聖盃佈局實際上是不多用的。

那麼怎麼可以兼容好，使用簡便的實現呢？

經過BFC便可

<div class="clearfix">
    <div>向左浮動</div>
    <div>向右浮動</div>
    <div>設置overflow:auto</div>
</div>

演示地址