两列布局、三列适应布局、两列等高适应布局。

一. 两列布局：左侧定宽、右侧自适应。

四种方法：flex 、position、float和负外边距、外边距

1. 使用flex.

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">*{margin:0;padding:0;}.main{display:flex;}.sitebar{flex:0 0 200px;order:-1;
//order属性用于更改在主轴方向上排列顺序,order数值越小，排列越靠前，默认为0，可以为负数background-color: green;}.content{flex:1;background-color: red;}</style>
</head>
<body><div class="main"><div class="content">右侧自适应区块</div><div class="sitebar">左侧定宽200px区块</div></div>
</body>
</html>

2. 使用position，考虑了页面优化，右侧区域先加载。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">*{margin:0;padding:0;}.sitebar{width:200px;background-color: green;}.content{position: absolute;left: 200px;right:0;top:0;background-color: red;}        </style>
</head>
<body><div class="content">右侧自适应区块</div><div class="sitebar">左侧定宽200px区块</div>
</body>
</html>

3. 利用float和负外边距

这里的100%是相对于父元素, margin-left的意思是子元素的左边框距离父元素右边框的距离，我这里没考虑padding,border等因素哈

当设置left元素的margin-left:-100%;时，left元素的左边框会与父元素的左边框重合。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding:0;}.main {width: 100%;float:left;}.main .content {margin-left: 200px;background-color: red;}.sitebar {width: 200px;float: left;background-color: green;margin-left: -100%;}</style>
</head>
<body><div class="main"><div class="content">右侧自适应区块</div></div><div class="sitebar">左侧定宽200px</div>
</body>
</html>

二、三列布局：左右定宽，中间自适应。

圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。

三种方法：flex、绝对定位、使用负外边距。

1. flex

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">.body{display:flex;}.content{flex:1;background-color: green;}.nav, .ads{/*//设置两个侧边栏宽度*/flex:0 0 200px;background-color: blue;}.nav {/*    把导航放到最左边*/order:-1;background-color: grey;}        </style>
</head>
<body><div class="body"><main class="content">center</main><nav class="nav">left</nav><aside class="ads">right</aside>    </div></body>
</html>

2. 绝对定位

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">body {margin: 0px;}.left {background-color: red;width:100px;position: absolute;top: 0px;left:0px;}.center {background-color: grey;margin-left: 100px;margin-right: 100px;}.right {background-color: green;width:100px;position: absolute;top:0px;right:0px;}    </style>
</head>
<body><div class="center">中间</div><div class="left">左列</div><div class="right">右列</div>
</body>
</html>

三、两列等高布局。

利用padding-bottom的正值与margin-bottom的负值相互抵消即可，同时最外层设置overflow:hidden;即可

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">.main {margin: 0 auto;overflow: hidden;width: 600px;}.left {background-color: red;width:300px;float:left;padding-bottom: 2000px;margin-bottom: -2000px;}.right {background-color: green;width:300px;float:left;padding-bottom: 2000px;margin-bottom: -2000px;}    </style>
</head>
<body><div class="main"><div class="left"><p style="height:200px">left</p></div><div class="right"><p style="height:300px">right</p></div></div>
</body>
</html>