布局：高度已知，布局一个三栏布局，左栏和右栏宽度为200px，中间自适应

需求：高度已知为200px，写出三栏布局，左栏和右栏各位200px，中间自适应，以下图所示：css

方法一：float浮动布局html

原理是：定义三个区块，须要注意的是中间的区块放在右边区块的下面，统一设置高度为200px，而后设置左边栏宽度为200px而且float:left，设置右边栏宽度为200px而且float:rightcss3

优势：兼容性比较好浏览器

缺点：float会脱离文档流，须要处理float周边的元素好比清除浮动布局

浮动布局的原理：查看浮动布局详解flex

<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>

效果以下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化flexbox

当center这个元素里面的内容超过设置的这个高度，会出现以下这样的问题url

解决办法能够在center中添加一个属性：overflow: hidden;后效果以下：spa

因此当高度不肯定的时候，这种布局方式不适用，左右两边的高度不会跟着变更.net

方法二：绝对定位布局

实现原理：设置三个区块分别左中右，而且统一设置高度为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,中间区块不设置宽度，最后须要在这三个区块的父元素上设置width: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里的内容增长，超太高度后这个区块自动增长，可是其余区块是不会自动增长的