题目：
假如高度已知，写出三栏布局，其中左右两栏各为300px,两头宽度自适应 。
根底代码如下
<style> * { padding: 0; margin: 0; } .layout { margin: 20px 0; min-height: 200px; } .layout div { min-height: 200px;/*已知高度*/ background: #ccf; } .layout .left { width: 300px; /*左栏宽度300px*/ background: #ffc; } .layout .right { width: 300px; /*右栏宽度300px*/ background: #cfc; }</style><body> <!--浮动解决方案--> <section class="layout float"> <div class="left"></div> <div class="right"></div> <!-- 留神三个模块的程序，对布局有影响 --> <div class="center">float</div> </section> <!--flex盒模型解决方案--> <section class="layout flex"> <div class="left"></div> <div class="center">flex</div> <div class="right"></div> </section> <!--position定位解决方案--> <section class="layout position"> <div class="left"></div> <div class="center">position</div> <div class="right"></div> </section> <!--table布局解决方案--> <section class="layout table"> <div class="left"></div> <div class="center">table</div> <div class="right"></div> </section> <!--栅格布局解决方案--> <section class="layout grid"> <div class="left"></div> <div class="center">grid</div> <div class="right"></div> </section> </body>一、浮动float解决方案
<style> .float .left { /*1、设置右边栏往左浮动*/ float: left; } .float .right { /*2、设置左边栏往右浮动*/ float: right; } .float .center { /*3、因左右两栏浮动后脱离了文档流，此时两头栏的宽度应该为100%，设置margin可让两头模块宽度自适应*/ margin: 0 300px; }</style>- 长处：兼容性好
毛病：会带来高度塌陷、影响四周元素布局等问题，须要革除浮动
革除浮动的办法：革除浮动的原理次要是开启该元素的BFC(块级格式化环境)-BFC的特点之一是：计算BFC的高度时，浮动元素会参加计算。开启元素BFC的办法有1. 设置该元素的float不为none（可为left/right）2. 设置该元素的position不为static和relative(可为fixed/absolute)3. 设置该元素的overflow不为visible(可为hidden/auto)4. 设置该元素的display为inline-box，table(与table相干的几个值，比方table-cell)个别咱们应用css中的clear属性革除浮动.clearfix::before,.clearfix::after{ content: ''; display: table; clear: both;}
二、position定位解决方案
<style> .position { /*1、设置父元素position为relative*/ position: relative; } .position div { /*2、设置三个子元素为相对定位*/ position: absolute; } .position .left { /*3、设置右边栏的left和top值为0*/ left: 0; top: 0; } .position .center { /*4、两头栏通过设置left和right值实现宽度自适应*/ left: 300px; right: 300px; } .position .right { /*5、设置左边栏的right和top值为0*/ right: 0; top: 0; }</style>长处：简便
毛病：设置相对定位的元素会脱离文档流，对子元素以及四周元素的布局影响较大。
三、flex盒模型解决方案
<style> .flex { /*1、设置父元素的display属性为flex*/ display: flex; } .flex .center { /*2、设置两头栏的flex属性值为1*/ flex: 1; }</style>长处：为布局而生的属性，解决了flex和position计划的弊病，且挪动端支持性好
毛病：IE8及以下不反对
四、table布局解决方案
<style> .table { /*1、设置父元素的display为table,并将width设置为100%*/ display: table; width: 100%; } .table div { /*2、子元素设置display属性值为table-cell*/ display: table-cell; }</style>长处：兼容性好
毛病：三个元素的高度会与当中高度最大的保持一致，且无奈批改。
五、grid栅格布局解决方案
<style> .grid { /*1、将父元素的display设置为grid*/ display: grid; width: 100%; /*2、设置行*/ grid-template-rows: 200px; /*3、设置列*/ grid-template-columns: 300px auto 300px; }</style>长处：最新css标准，简洁