float元素先后顺序

在练习经典左中右三列布局，左右固定宽度，中间撑开自适应中遇到的小问题

本来想效果是这种：

写完代码如下：

<style>
  .container {
    height: 200px;
  }
  .container div {
    height: 100px;
  }
  .left {
    float: left;
    width: 500px;
    background: red;
  }
  .center {
    background: green;
  }
  .right {
    float: right;
    width: 500px;
    background: blue;
  }
</style>
<div class="container">
  <div class="left">aaa</div>
  <div class="center">bbb</div>
  <div class="right">ccc</div>
</div>

发现实际效果是这样：

为什么呢？？？

首先是 left 元素，它是一个左浮动的float元素，会脱离文档流；接下来是 center 元素，这是一个正常的块元素，一个块元素默认独占一行，所以实际上 绿色区域是占满了宽度100%的(上图中红色区域下边也是绿色，只是被float的红色遮盖住了,给center设置宽度150px如下图)；最后是 right 元素，它是右浮动的float元素，但因为上一行已经被center占满，只能在下一行右浮动。

那怎么才能实现想要的效果呢？

很简单，只要在dom中交换center和right的位置，这样，left和right都会浮动脱离文档流，后边的center就会自动填充第一行了。

<style>
     #center {
        background: green;
        height:150px;
      }
</style>
<div class="container">
  <div class="left">aaa</div>
  <div class="right">ccc</div>
  <div id="center">bbb</div>
</div>

如下图：(故意将center元素高度设置150px，为了说明后边的问题)

如上图，可以看到效果虽然实现了，但是 center 实际占满了一整行，这就会出现一个问题：当center 中文字过多时，会在 left 和right周围产生文字环绕现象，如下图：

解决办法：

1.给 center 增加 overflow:hidden;

<style>
     #center {
        background: green;
        height:150px;
        overflow:hidden;
      }
</style>

2.给 center 设置 margin-left: left宽度; margin-right: right宽度;

<style>
     #center {
        background: green;
        height:150px;
        margin:0 500px;
      }
</style>