三列中间宽度自适应的布局是经常需要的。
圣杯布局能实现三列中间宽度自适应,但是并不是最佳实践。
圣杯布局的要求是
- 三列布局,中间宽度自适应,两边定宽;
- 中间栏要在浏览器中优先展示渲染;
- 允许任意列的高度最高;
具体实现网上右很多文章了,双飞翼布局也是为了这个目的,在圣杯布局上改动的。
在很多情况不需要中间优先展示渲染。比如很多网站第一行都是 左:热点新闻、中:最近更新、右:常用链接,重要性最高不是中间。还有只是为了布局不是为了内容,比如填的一些表单。圣杯布局其实是很少用的。
那么怎么能够兼容好,使用简便的实现呢?
通过BFC即可
<div class="clearfix">
<div>向左浮动</div>
<div>向右浮动</div>
<div>设置overflow:auto</div>
</div>