如何搞定两列定宽加一列自适应的CSS布局情况

先说一下这篇要解决的问题，如何实现一个两列定宽加一列自适应？

记得关于多列布局的第一篇文章中，第一个方法是应用float加overflow的方法实现了一种定宽加自适应的布局。如果真的理解了实现原理的话， 那今天这篇关于两列定宽加一列自适应其实就非常简单了。跟着我一起来实现一下吧。当娱乐，好玩......

我准备了一个DOM结构

准备将left/center两列定宽，将right自适应。

CSS其实就非常简单了，先看一下代码：

很容易看懂，是吧？在给大家看最终实现效果图之前，我需要说一下原理性的东西。

1、关于浮动float：还记得float的设计之初是用来干嘛的吗？文字环绕图像周围。它定义元素在哪个方向浮动。

所以说， 当我不给right元素加overflow属性的时候，看一下效果是下面这样的：

是不是有点有图像环绕一样了。这种情况下，left/center和right区域就明显重叠了。

2、overflow：结合实际的这个例子说一下在这里的作用，当overflow的值不为visible时，就会生成一个块级格式化上下文，就是我们常说的BFC区域。这样，根据原则，BFC的区域不会与float元素区域重叠。立马就得到了我们想要的效果：

总结一下：

两列定宽加一列自适应的情况其实就是定宽加自应用布局的一个扩展现象，比较容易理解，下篇来总结一下不定宽加自适应的问题如何处理。