1、定位
我是左边，我是固定的
我是中间，我是自适应的，左边右边都position固定了，他们脱离了文档流，我终于得到机会挤进中间啦！只要我margin一下就没人会挡住我啦！我可真是个小机灵鬼(同时，我还是个自由人，我div写在开头中间结尾都可以呢)
我是右边，我也是固定的
2、浮动
我是左边，我是固定的
我是右边，我也是固定的
我是中间，我是自适应的，左右浮动脱离了文档流，我才挤进来呢，margin一下也不会被挡住啦（这里我div必须在左右的后面，因为我在前面的话，他们会浮在我后面的哟）
.left, .right{
width: 200px;
height: 200px;
background: red;
}
.left{
float: left;
}
.right{
float: right;
}
.middle{
height: 200px;
background:#efbdbd;
margin-left: 200px;
margin-right: 200px;
}
3、圣杯布局
我是中间，我是自适应的
1、左中右float：left；顺便position：relative后面会用到
2、中间width：100%；
3、这时，中间元素会把两边撑开，那么我们用margin-left把他拉回来；
4、两边元素倒是回来了，中间被盖住了怎么办？不着急，整个外层加个padding；
5、解决了上一个问题，左右元素又偏了！还记得刚开始的定位吗？对！对左右元素定位就好啦！
(我div必须在第一位)
我是左边，我是固定的
我是右边，我也是固定的
4、双飞翼布局
我是中间，我是自适应的
1、左中右float：left；
2、中间width：100%；
3、这时，中间元素会把两边撑开，那么我们用margin-left把他拉回来；
4、两边元素倒是回来了，中间被盖住了怎么办？这次我们不在整个外层加个padding了；我们在middle里面加个子标签并margin
5、可以啦！
(我div必须在第一位)
我是左边，我是固定的
我是右边，我也是固定的
5、flex
我是左边，我是固定的
我是中间，我是自适应的，利用css3的新属性fles，弹性布局，父元素设置display:flex,中间div设置flex；1；
我是右边，我也是固定的
如果想要做两列布局（左边固定，右边自适应），全部可以参考这个，唯一有一种方法自己的方法利用BFC也很简单。
圣杯布局和双飞翼布局是参考了这位同学的，可以说是照搬来的。
https://www.cnblogs.com/imwtr...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114291.html
