实现三栏布局的五种方式详解
1.float+margin
思路：中间的div留出左右div的位置，左右div各自向左右浮动。该方法比较简单，没什么好解释的。
CSS:
*{
margin: 0;
padding: 0;
}
body{
min-width: 900px;
}
.left{
float: left;
height: 300px;
width: 200px;
background-color: lightblue;
}
.right{
float: right;
height: 300px;
width: 250px;
background-color: skyblue;
}
.middle{
margin-left: 20px;
margin-right: 220px;
height: 300px;
background-color: #eee;
}
HTML:
<div class="container">
<div class="left">1</div>
<div class="right">2</div>
<div class="middle">3</div>
</div>
2.利用BFC的定义
让中间的div通过overflow:hidden触发BFC，左右div左右浮动，这个也比较简单。
CSS:
*{
margin: 0;
padding: 0;
}
body{
min-width: 900px;
}
.left{
float: left;
height: 300px;
width: 200px;
background-color: skyblue;
}
.right{
float: right;
height: 300px;
width: 250px;
background-color: plum;
}
.middle{
height: 300px;
overflow: hidden;
background-color: lightgreen;
}
HTML:
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
以上两种都是先渲染左右div，再渲染中间div的，效率不够好，下面的是先渲染中间div的。
3.双飞翼布局
双飞翼布局主要是用了margin的负值，让在下层的div到上面去。我们首先写上HTML:
<div class="container">
<div class="middle">1</div>
</div>
<div class="left">2</div>
<div class="right">3</div>
在前两个方法中，不设置container也没有关系，你可以看到我甚至没有写container的样式，但是从这个开始，container就有用了。
我们先写好最基本的CSS样式，然后再一点点添加：
body{
min-width: 900px;
}
*{
margin:0;
padding:0;
}
.container{
float: left;
width: 100%;
}
.left{
float: left;
height: 300px;
width: 200px;
background-color: red;
}
.right{
float: right;
height: 300px;
width: 250px;
background: green;
}
.middle{
height: 300px;
background-color: yellow;
}
我们让左右div各自浮动，现在是这样的：
试着拖拽一下窗口，是不是感觉挺像那么回事了？
下面我们来看看margin的妙用：
给left添加一个margin-left,记得得是负的，随便是多少都行。我们就假设是-100px吧，这个时候你会发现div往左移动了100px。而整个div的宽度是200px，于是这个时候你就只能看到半个div了。
就像这样：
那么如果它再往左移动100px,会发生什么呢？是看不见，还是移动到上层？
答案是移到上层。
想一下继续左移会发生什么？当然是一点点移动到最左边。那么它移动到最左边一共需要移动多少距离呢？
是不是还要移动container的宽度-left的宽度，也就是上图中黄色的宽度吧。
而我们让left从下一层移动到上一层已经移动了一个left的宽度，也就是200px了，做一下简单的加法就会发现我们需要移动整个container的宽度。而我们将container的宽度设为了100%。
于是我们就得出了让左div移动到最左边的方法：margin-left:-100%;
在原来的CSS中的.left中添加 margin-left:-100%，我们就实现了左边的div。
同样的道理，右边的div也要移动自身宽度的距离才能到上层去，而这个时候它正好在最右边，因此不需要做其他的动作了。在.right中添加margin-left:-250px;我们就实现了双飞翼布局。
4.圣杯布局
圣杯布局和双飞翼很像，我们继续先写出基本的代码来：
CSS:
*{
margin:0;
padding:0;
}
body{
min-width: 900px;
}
.container{ /*给左右两个div空位置*/
margin-left: 200px;
margin-right: 250px;
}
.middle{
width: 100%;
float: left;
background: red;
height: 300px;
}
.left{
float: left;
background: yellow;
width: 200px;
height: 300px;
}
.right{
float: left;
background: blue;
width: 250px;
height: 300px;
}
HTML:
<div class="container">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
这一次container包住了三个div，同时我们设置了中间div的宽度为百分百。
为了给左右两个div上来，我们显然要让container空出位置来。
现在是这样的：
同样，我们通过margin让这俩货上去。
同样我们用上面双飞翼的方法，.left添加margin-left:-100% .right添加margin-left:-250px;
然后一刷新，好像和想象中的不太一样...
为啥这俩货没有去最左和最右？因为我们用container包住了它们呀！所以它们去了container的最左和最右。如果给container一个width,就能看得很清楚了。
设置container的width为800px,你可以随便设，只要大于450就行
看过以后你就可以把这一行代码删掉了，因为没什么用，只是让你意识到它们其实在container的最左和最右。
那么我们要如何让这俩货到应该去的地方？当然是再移动一下位置。如果我们使用相对定位，让它在自己现在位置的基础上左移/右移，是否就能实现？
在.left,.right里加上position:relative，然后我们只需要让左div在现在的位置的基础上再往左移动200px,也就是我们左边空出来的那块地方的宽度，让右div往右移动250px.
在.left中加上left:-200px; .right中加上right:-250px; 就可以了。
5.flex布局
flex的三栏布局有很多种玩法，这里只写一种。我们先写最基础的代码：
CSS:
header{
height: 80px;
width: 100%;
}
body{
min-width: 900px;
}
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
}
.middle{
height: 300px;
background: red;
}
.left{
height: 300px;
background-color: blue;
}
.right{
height: 300px;
background: yellow;
}
HTML:
<div class="container">
<div class='middle'>中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
这个时候是这样的：
下面我们要讲到flex属性，flex有三个值 分别代表flex-grow, flex-shrink, flex-basis
flex-grow: 这是一个数字，如果是1表示它是其他项目的1倍，2则是2倍。就像上图中我们假设把每个颜色看成一份，那么如果红色的flex-grow为2 它的宽度就会是其他两个的两倍，即2*蓝色的宽度。
flex-shrink: 这也是一个数字，和上面的放大相反，这是缩小
flex-basis: 这代表项目的长度，和width,height的用法差不多 可以跟xxpx啊，xx%啥的。
来仔细的了解一下flex-grow:
我们给container 一个宽度，假设是500px好了，container是父容器，而left,middle,right是子容器。 在给三个子容器宽度 100px 来看一下效果：
为了看的清楚，我给父容器一个背景颜色。可以看到这三个div各自有100px的宽度，剩下200px的宽度在最右边。这就是剩余空间。
现在我们假如给middle设置一个flex-grow:1，你会发现它会占据所有的剩余空间，因此它的实际宽度会变成300px。如图：
由此我们可以发现，flex-grow会索取剩余空间，它的默认值为0，也就是我不要你的剩余空间，那么如果这个时候我们给left也设置flex-grow:1，显然这俩会平分剩余空间，如图：
在知道了flex-grow的妙用之后，设想一下：左右div设定了宽度，让中间div设置flex-grow:1是否就能让其独占剩余空间，不论父元素宽度的变化，剩余空间都会等于 父元素宽度-左右div宽度 以此达到自适应的目的？
于是我们给.left 加上一行flex: 0 1 200px; .right加上 flex: 0 1 250px;
看一下效果：
好像不太对啊，中间的div在最左边是怎么回事？因为我们写HTML的时候把middle放在了第一个，所以渲染也是它第一个渲染，这样显然是不对的。所以我们要做的就是让left到第一个去。
给left设置 order:-1，再刷新一下就大功告成了。
order的值决定了这个容器的排列顺序，越小越靠前，你也可以给left设置order:1 , middle设置 order:2 ， right设置 order:3 只要数字有大小就行了。
浙公网安备 33010602011771号