需求：高度已知为200px，写出三栏布局，左栏和右栏各位200px，中间自适应，如下图所示：
方法一：float浮动布局
原理是：定义三个区块，需要注意的是中间的区块放在右边区块的下面，统一设置高度为200px，然后设置左边栏宽度为200px并且float:left，设置右边栏宽度为200px并且float:right
优点：兼容性比较好
缺点：float会脱离文档流，需要处理float周边的元素比如清除浮动
浮动布局的原理：查看浮动布局详解
<style> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 200px; } .left{ width: 200px; float: left; background-color: red; } .right{ width: 200px; float: right; background-color: blue; } .center{ background-color: green; } </style> <body> <section class="layout float"> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center">浮动解决方案</div> </article> </section> </body>
效果如下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化
当center这个元素里面的内容超过设置的这个高度，会出现如下这样的问题
解决办法可以在center中添加一个属性：overflow: hidden;后效果如下：
所以当高度不确定的时候，这种布局方式不适用，左右两边的高度不会跟着变动
方法二：绝对定位布局
实现原理：设置三个区块分别左中右，并且统一设置高度为200px和绝对定位，左边栏left:0，右边栏right:0,最重要的是中间的区块，不设置宽度，并且设置left:200px,right:200px，这个定位的数值也就是左边栏和右边栏的宽度大小
优点：快捷，不容易出问题
缺点：定位会脱离文档流，那么后面的元素也都是要脱离文档流的，这个方式的可使用性比较差
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 200px; position: absolute; } .left{ width: 200px; left: 0; background-color: red; } .right{ right: 0; width: 200px; background-color: blue; } .center{ background-color: green; left: 200px; right: 200px; } </style> <body> <section class="layout absolute"> <article class="left-right-center"> <div class="left"></div> <div class="center">绝对定位解决方案</div> <div class="right"></div> </article> </section> </body> </html>
效果如下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化
方法三：flexbox布局方式
实现原理：首先定义三个区块，分别为左中右，并且统一设置高度为200px，然后在这三个区块的父元素中设置display:flex，设置左边栏和右边栏宽度为200px,中间区块设置flex:1
优点：比较完美的一种方式，在移动端基本都是使用这个布局方式，这是css3中的新的布局方式，当设置最小高度后，中间区块内容溢出时高度会自动撑开，左右两边的高度也可以跟着撑开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> html *{ padding: 0; margin: 0; } .layout.flexbox article div{ min-height: 200px; } .layout.flexbox .left-right-center{ display: flex; } .left{ width: 200px; background-color: red; } .right{ width: 200px; background-color: blue; } .center{ background-color: green; flex: 1; } </style> <body> <section class="layout flexbox"> <article class="left-right-center"> <div class="left"></div> <div class="center">flexbox解决方案</div> <div class="right"></div> </article> </section> </body> </html>
效果如下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化
方法四：表格布局方式
实现原理：定义三个区块，并且统一设置高度为200px和display:table-cell，然后左边栏和右边栏宽带设置为200px,中间区块不设置宽度，最后需要在这三个区块的父元素上设置100%和display:table
优点：兼容性非常好，在IE8也是可以的，弥补flexbox布局在IE8下的不支持
缺点：当某个区块高度不足的时候（固定高度），其他区块也跟着需要调整高度，但有这种需求就是其他区块不想跟着调整高度，这就是这个布局的缺点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> html *{ padding: 0; margin: 0; } .layout.table article div{ display: table-cell; height: 200px; } .layout.table .left-right-center{ display: table; width: 100%; } .left{ width: 200px; background-color: red; } .right{ width: 200px; background-color: blue; } .center{ background-color: green; } </style> <body> <section class="layout table"> <article class="left-right-center"> <div class="left"></div> <div class="center">表格布局解决方案</div> <div class="right"></div> </article> </section> </body> </html>
方法五：网格布局
实现原理：定义三个区块分别为左边栏，中间区块，右边栏，然后再父元素上设置display:grid，grid-template-rows: 200px;（设置格子的高度），grid-template-columns: 200px auto 200px;（这里表示有三列，第一列和第三列的宽度为200px，第二列自动）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> html *{ padding: 0; margin: 0; } .layout.grid .left-right-center{ width:100%; display: grid; grid-template-rows: 200px; grid-template-columns: 200px auto 200px; } .left{ background-color: red; } .right{ background-color: blue; } .center{ background-color: green; } </style> <body> <section class="layout grid"> <article class="left-right-center"> <div class="left"></div> <div class="center">网格布局解决方案</div> <div class="right"></div> </article> </section> </body> </html>
效果如下：效果如下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化
需求：如果高度不确定，那么上述的布局方式哪个还可以适用
flexbox布局和table布局是可以通用的，会自动增加高度（三个区块都会自动增加高度）
网格布局：高度不会自动增加，里面的内容会溢出，但可以不设置grid-template-rows: 200px;这个属性的话，三列都会随着内容而增高，并且可以设置三个区块的最小高度
<style> html *{ padding: 0; margin: 0; } .layout.grid .left-right-center{ width:100%; display: grid; min-height: 100px; grid-template-columns: 200px auto 200px; } .left{ background-color: red; } .right{ background-color: blue; } .center{ background-color: green; } </style> <body> <section class="layout grid"> <article class="left-right-center"> <div class="left"></div> <div class="center"> <p>flexbox解决方案</p> <p>flexbox解决方案</p> <p>flexbox解决方案</p> </div> <div class="right"></div> </article> </section> </body>
浮动布局：会出现下面这种情况
因为浮动的原理，中间区块的内容被区块1挡住了，当内容超出以后，没有了遮挡物，所以就出现了这种情况，解决这种问题需要使用BFC（查看盒子模型和弹性盒子模型的详解）
绝对定位：比如讲center里的内容增加，超过高度后这个区块自动增加，但是其他区块是不会自动增加的