两端固定中间自适应布局实现

首先完成中间自适应部分

这个简单，设置个左右外边距加上颜色就可以了。

<style>

    .main{
        float:left;
        width:100%;
    }
    .main_body{
        margin:0 210px;/*上外边距和下外边距是 0px右外边距和左外边距是 5px*/
        background:#888;
        height:200px;
    }

    </style>

<div class="main">
        <div class="main_body">Main</div>
 </div>
    <div class="left">Left</div>
    <div class="right">Right</div>

结果

image.png

实现两侧固定部分

为了让实现div元素处于一行，首先左侧必须float。
好，加上

    .left{
        float:left;
        width:200px;
        height:200px;
        background:#F60;
    }

结果如图
哎，不对劲啊

image.png

怎么left跑下面去了。因为main元素是float，还是100%。所有后面的自然只有往下排放了。
那再加一句

   .left{
        margin-left:-100%;
    }

结果如图。为啥 margin-left:-100%就能让他两排一排呢？

image.png

改成-10%试试。

image.png

marigin-left使得元素自身向左移动，上述-100%折合多少px？应该是整个浏览器那么宽，下面这行不够移了，移到上一行去了。

再看看-80%

image.png

事实上，移到-100%，刚好能移到到最左边。

好现在把右边的也加上

.right{
        float:left;
        width:200px;
        height:200px;
        background:#F60;
    }

结果如下

image.png

如何让右侧的也移动到第一行呢？margin-left值设置多少？如果设置-50%，就过头了。

image.png

right的宽度是-200，那就设置-200px。
刚好

image.png

总结代码

<style>
 body{
        margin:0;
        padding:0;
        min-width:600px;
    }
    .main{
        float:left;
        width:100%;
    }
    .main_body{
        margin:0 210px;
        background:#888;
        height:200px;
    }
    .left,.right{
        float:left;
        width:200px;
        height:200px;
        background:#F60;
    }
    .left{
        margin-left:-100%;
    }
    .right{
        margin-left:-200px;
    }

    </style>

<div class="main">
        <div class="main_body">Main</div>
 </div>
    <div class="left">Left</div>
    <div class="right">Right</div>

总结

关键几点，
自适应的部分不要设置float，左侧和右侧都要设置float。
理解margin-left的作用，向左移动，移动到左侧尽头就向上一行左侧移动，这个设定有点trick。
负margin绝壁是个trick。虽然有些人不这么认为

image.png

思考：为啥main必须是float~

以上纯属个人试验，正确性不做保证。。