问题：给定高度，写一个三栏布局，其中左右栏的宽度各为200px，中间自适应答案：效果示例解决方案（1）浮动；(2)绝对定位；(3)弹性布局；(4)表格布置；(5)网格布局。扩展题：（1）每种方案的优缺点（2）它们之间的比较，假设去掉高度，哪种方法仍然适用，哪种方法不适用（3）方案的兼容性，哪种更适用实际项目中扩展答案：(1)A：缺点：浮动不在文档流中，使用时需要清除浮动；优点：兼容性更好B：缺点：绝对定位布局脱离文档，其子元素也会脱离文档流；优点：使用快捷，不易出问题，兼容性更好C：灵活布局是解决以上问题，比较完美的一个D：表格布局繁琐，不利于SEO优化；表格布局兼容性更好，IE8不支持flex，但支持表格。当其中一个单元格超出时，两侧单元格的高度也会同时增加，具体视场景而定。E：网格布局作为一种新技术，可以实现很多复杂的布局，代码量也大大简化。(2)flex布局和table布局。因为浮动布局在左侧被遮挡，没有超过的文字会出现在中间，多余的文字会出现在左侧，没有遮挡。解决方法：三栏布局，两栏布局左右固定宽度，中间自适应左边固定宽度，右边自适应固定上下高度，中间自适应右边固定宽度，左边自适应adaptive/fixedtopheight,bottom自适应/bottomheightfixed,topAdaptivepublicstyle：设置sizebox的高度为100px，固定左右（leftandright）div的宽度为200px，设置不同三个盒子的颜色来区分它们。*{填充：0；边距：0;}.layout{高度：100px;顶部边距：20px；底部边距：20px；:200像素;背景颜色：蓝色；}.layout.center{背景颜色：黄色；}.layout.right{宽度：200px；background-color:red;}(1)方案一：浮动居中的div需要放在后面（其他方案不需要改变Html顺序），左右分别使用float:left和float:rightdivs,float使得左右元素脱离文档流，中间正常文档流。.float.left{float:left;}.float.right{float:right;}
