如何实现三列布局，中间宽度自适应，两边定宽。以及双飞翼布局与圣杯布局。

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

三列中间宽度自适应的布局是经常需要的。

圣杯布局能实现三列中间宽度自适应，但是并不是最佳实践。

圣杯布局的要求是

• 三列布局，中间宽度自适应，两边定宽；
• 中间栏要在浏览器中优先展示渲染；
• 允许任意列的高度最高；

具体实现网上右很多文章了，双飞翼布局也是为了这个目的，在圣杯布局上改动的。

在很多情况不需要中间优先展示渲染。比如很多网站第一行都是 左：热点新闻、中：最近更新、右：常用链接，重要性最高不是中间。还有只是为了布局不是为了内容，比如填的一些表单。圣杯布局其实是很少用的。

那么怎么能够兼容好，使用简便的实现呢？

通过BFC即可

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

演示地址

来源：oschina

链接：https://my.oschina.net/u/818899/blog/2250203