方法1 浮动
<style>
.float>div{
height: 100px;
}
.float .left{
width: 300px;
float: left;
background: red;
}
.float .right{
width: 300px;
float: right;
background: blue;
}
.float .center{
background: green;
}
</style>
<div class="float">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
也许会觉得奇怪的是，为什么中间的写在最后，但却显示在了中间呢？这就要想到浮动的原理。我们知道，浮动的原理就是浮动元素会脱离文档流，根据浮动的方向，向这个方向浮靠，当一个浮动元素脱离文档流后遇到父容器或者另一个浮动盒子容器时，然后浮动停止。它就像是浮动了的一样，脱离文档流后，它会影响后面的元素，浮动元素后面的常规元素将围绕它。所以，在这里就巧妙地运用了浮动原理。先分析左浮动元素，左浮动元素向左浮动，那么首先它脱离了文档流，其次它向左浮动，那么它就会在左边找看有没有另一个浮动元素，这里明显没有，那就继续到上一层找父容器，然后就找到了div.float，这时浮动停止，div.left的左边就紧挨着父元素的左边。
再来到右浮动，首先因为左浮动盒子脱离了文档流，右浮动元素也因此受到了影响，本来如果它没有浮动的话，它还是常规流中的盒子，因为div.left已经脱离了文档流，为了好理解那就暂且认为它不存在了吧，这时div.right就应该是取代了div.left在常规流中的位置的，但div.left由于浮动原因，它不是不存在，而是“漂浮”在了常规流的上面，所以会有盖住常规流盒子的效果。不信我们可以测试一下，为了看得到浮动的真面目，我把div.right的高度、宽度分别设置多了100px，并且取消了右浮动，让它先作为一个常规流中的盒子。
<style>
.float>div{
height: 100px;
}
.float .left{
width: 300px;
float: left;
background: red;
}
.float .right{
width: 400px;
/*float: right;*/
background: blue;
height: 200px;
}
.float .center{
background: green;
}
</style>
<div class="float">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>得到的效果是这样的：
而后面的div.center因为div.right没有浮动，还是在常规流中的原因，使它不受影响。
但是这不是我们要的效果，这就到了div.right向右浮动的时候了，根据刚才说的浮动原理，首先div.right脱离文档流，并且方向是向右的，那么它就会被一股向右的“拉力”拉过去了，在被“拉动”到右边的过程中，它也在“观望”是否有相邻的浮动元素，明显这里没有，（注意下方的div.center它没有设置浮动，所以它不是浮动元素）那就上一层找父容器吧，所以这时找到了上层父元素，然后右浮动停止。这时，我们来分析一下div.center，由于前面的div.left、div.right纷纷脱离了文档流，也像刚才分析的那样，暂且当这两个脱离了文档流的div.left、div.right不存在吧，那就由div.center取代了div.left、div.right在常规流中的位置，注意，由于我们没有给div.center设置宽度，所以根据块级元素的特点，默认它的宽度是100%的。但是div.left、div.right不是不存在，只是它们“漂浮”在了常规流的上方，所以得到了如下的效果：
.float .right{
float: right;
}
为了验证我刚才说的div.center的宽度为100%，这里我把div.center的高度再放多200px：
<style>
.float>div{
height: 100px;
}
.float .left{
width: 300px;
float: left;
background: red;
}
.float .right{
width: 400px;
float: right;
background: blue;
height: 200px;
}
.float .center{
background: green;
height: 300px;
}
</style>
<div class="float">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>效果如下：
如果高度是已知的，那是还好，我们直接把每一个div的高度统一设置为一个固定的高度，就像我上面开始设置的那样，可以实现高度一致的三列布局。但有些时候三列的高度要求不一致呢？中间自适应部分由于浮动原因，导致高出来的部分分别向两边溢出了，这也体现了浮动的优点与缺点，那我们又如何实现纵向不溢出呢？目前我想到的一个办法是，为div.center设置左右两边的外边距，外边距的大小分别是左右两个浮动元素的宽度大小。当然，前提是左右两块浮动的宽度是已知的才可行，因为只有知道了左右两边的距离才好设置外边距。
<style>
.float>div{
height: 100px;
}
.float .left{
width: 300px;
float: left;
background: red;
}
.float .right{
width: 400px;
float: right;
background: blue;
height: 200px;
}
.float .center{
background: green;
height: 300px;
margin: 0 400px 0 300px;
}
</style>
<div class="float">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>不等高度的三列布局效果：
更于2019.1.28.20.30
今天又学到了一个可以实现中间不溢出的解决方法，那就是创建BFC，BFC指的是块级格式化上下文。BFC有如下特点：BFC的垂直方向会发生边距重叠，创建了BFC的元素的边距与浮动元素的边距不会重叠，BFC元素是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素，BFC在计算高度时，里面的浮动元素也会参与计算。对应到BFC以上的特点，很明显，我们可以得到，创建了BFC的元素，它的边距不会与浮动元素发生边距重叠。
那么如何创建BFC呢？
创建BFC，可以设置如下任意属性：
float不为none；
position不为static和relative
overflow不为visible。可以是overflow: hidden; overflow: auto;
display为inline-block、table-cell、table-caption
--------------------------
实测有效：
<style>
.float>div{
height: 100px;
}
.float .left{
width: 300px;
float: left;
background: red;
}
.float .right{
width: 400px;
float: right;
background: blue;
height: 200px;
}
.float .center{
background: green;
height: 300px;
/*margin: 0 400px 0 300px;*/
overflow: hidden;
}
</style>
<div class="float">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
至此，浮动方法实现三列布局的原理我做了一个浅显的分析，由于本人学识浅薄，有误的地方还望高人热心指点。