要求假设已知高度，请编写一个三栏布局，其中左栏和右栏的宽度各为300px，并且中间自适应方案：浮动布局、绝对布局、Table布局、网格布局、flex布局、双飞翼布局、圣杯布局（共7种）浮动布局方式：左右两侧分别左右浮动，中间容器要设置的左右边距是左右边各自的宽度注意：中间的div区域要放在最前面渲染。优点：比较简单，兼容性好。只要clearfloat做好，就没有问题。缺点：浮动元素脱离文档流，需要clearfloat。如果这个处理不好，会带来很多问题，比如高度塌陷之类的绝对布局方式：右、左、中、右三个区域都设置为绝对定位。左侧区域设置为0，右侧区域设置为0，左右设置为中间左右区域的宽度。问题缺点：绝对定位脱离了文档流，意味着下面的所有子元素也会脱离文档流，导致这种方式的有效性和易用性较差。table布局方式：包裹parentcontainer设置display:table，左中右区域设置display:table-cell。优点：实现简单，代码少缺点：当其中一个单元格的高度超过时，两侧的单元格也会增加高度。而且有时候这个效果并不是我们想要的grid布局：设置display:grid为包裹的父容器，并设置grid-template-columns:leftwidthauto（中间宽度自动），rightwidth，grid-template-rows:注意toeacharea：中间的div区域要放在中间进行渲染。优点：简单快捷（可随意组合，其中一个高度变化，模块不会随之变化）middleareatoflex:1注意：中间的div区域应该放在中间进行渲染。优点：简单快速（除了min-height如果不设置高度，则其他一个块的高度改变，其他块的高度也会改变）缺点：不支持IE10以下的圣杯布局（已实现）通过向左浮动和相对定位）方法：为包的父容器设置padding（左右区域留出空间）。设置中间区域的宽度为100%，设置position:relative为左、中、右区域，leftoftheleftarea:-leftareawidth,margin-left:-100%。rightoftherightarea:-rightareawidth,margin-left:-rightareawidth（左右区域占据父容器的padding部分）注：body最好设置一个最小宽度优点：简单结构，没有多余的dom层缺点：当中间部分的宽度小于左侧时，会出现混乱。双飞翼布局（通过左浮动和margin实现）（圣杯布局的改进）方法：为左、中、右区域设置左浮动，中间区域用容器包裹。并将宽度设置为100%。对于包裹在中间的子区域，设置左右边距为左右区域的宽度（给左右区域留出空间）设置左边区域的margin-left：-100%，设置themargin-leftoftherightarea:-rightareawidth(左右区域占用的空间是中间区域的margin空间)注意：对于中间区域，必须有一个容器将其包裹起来优点：支持各种宽度和高度变化，通用性强缺点：多一层代码包裹中间区域（增加渲染树的计算量），三列高度不统一和扩展问题如果高度不固定，这布局方案可采用：flex布局、网格布局、表格布局
