CSS浮动三栏布局

不使用定位，只使用浮动实现左右固定，中间宽度自适应布局

实现关键：

自适应部分一定要放在第一个位置，使用浮动，且宽度设置为100%，如果不设置为100%，浮动元素内容不够撑开整个宽度。
左右固定部位，使用margin-left :负数，使其左右靠齐。
中间自适应部分嵌套一个div，设置margin-left 和 margin-right 使其空出左右固定的宽度。

代码如下：


<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title>三列布局</title>
   <style>
   .box{
       height: 500px;
       background-color: bisque;
       position: relative;
   }
   .box .box-content {
       height: 100%;
       float: left; 
       /* 一定要设置浮动，要不下面的模块上不来 */
       width:100%;
       /* 一定要设置100%，要不内容不够称不开整个页面 */
       background-color: blue; 
       /* 默认还是整行 */
   } 
   .box .box-content .child {
       margin: 0 210px;
           /* 中间模块空出左右距离，设置浮动 */
       background: red;
       height: 100%;
   }
   .box .box-left { 
       width: 200px; float: left; 
       margin-left: -100%; 
       /* 设置浮动， margin-left:-100% 可以使元素往上移一行，并且移动到最左边 */ 
       height: 300px; 
       background-color: green; 
   } 
   .box .box-right { 
       float: left; 
       width: 200px; 
       min-height: 100%; 
       margin-left: -200px;
       /* 设置浮动， margin-left:负的自身宽度 可以使元素往上移一行，并且移动到最右边 */ 
       background-color: pink; 
   } 
   header,footer { height: 75px; background-color: aqua; } 
</style> 
</head>
<body> 
   <header> </header> 
   <div class="box"> 
       <div class="box-content">
           <div class="child">
               中间主题内容
           </div>
       </div>
       <div class="box-left">
           左边内容
       </div>
       <div class="box-right">
           右边内容
       </div> 
   </div>
   <footer>
   </footer>
</body>
</html>

第二种方式是不使用margin，而是使用padding进行扩展，同时给左右元素流出空间；

<style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
    }
    .box .box-content {
        box-sizing:border-box;
        height: 100%;
        float: left; /* 一定要设置浮动，要不下面的模块上不来 */
        width:100%;/* 一定要设置100%，要不内容不够称不开整个页面 */
        /* 默认还是整行 */
        padding:0 210px;
        } 
    .box .box-content .child {
          /* 中间模块空出左右距离，设置浮动 */
        background-color: blue; 
        height: 100%;
    }
    .box .box-left { 
        width: 200px; float: left; 
        margin-left: -100%; /* 设置浮动， margin-left:-100% 可以使元素往上移一行，并且移动到最左边 */ 
        height: 300px; 
        background-color: green; 
        } 
    .box .box-right { 
        float: left; 
        width: 200px; 
        min-height: 100%; 
        margin-left: -200px;/* 设置浮动， margin-left:负的自身宽度 可以使元素往上移一行，并且移动到最右边 */ 
        background-color: pink; 
        } 
    header,footer { height: 75px; background-color: aqua; } 
</style> 
<body> 
    <header> </header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
            <!-- 这个div只是为了方便看，设置了以下背景色 可用可不用，内容区还是自适应的 -->
                中间主题内容
            </div>
        </div>
        <div class="box-left">
            11dsdasdas不你弟弟呢单独
        </div>
        <div class="box-right">
            12酷酷酷酷酷的的是计算机技术升级的历史记录
        </div> 
    </div>
    <footer>

    </footer>
</body>