缺点：如果有文字出现，布局就会错乱，导致扩展性不好。 3、将未浮动的middle挤了下去。 此时lefe和right都跟着被拉回来了，左右空出了200px。所以用相对定位把left,right拉回来； 如果某一列内容过多，文字会溢出。解决方法：等高布局；

常见的网页布局有很多种，比如单列布局、等高布局、三栏布局等等。其中三栏布局在很多网站都有用到，这也是一种比较经典的网页布局方式，当然，想要实现网页三栏布局的方式有非常之多，我们今天就主要学习一些

【实现三栏布局的7种方法】实现左右两栏固定宽度，中间一栏自适应宽度的方法总结。主要是浮动+边距负值/calc()、圣杯布局、双飞翼布局、定位、弹性布局和网格布局这7种方法。

本篇章主讲双栏布局和三栏布局的一些较为古老及实用的原理及实现。说它古老主要也是因为我们不会涉及 flex 这一类魔法一般的布局方式，虽然我也知道用 flex 就能轻松实现很多布局。 做这个文章，一方面也是自己做个学习记录，当做温习一番。另一方面，也希望能够帮助看到这篇文章的新手…