CSS float的初步理解：用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

最近在学习web前端的知识，今天看IFE平台上的开源题目的时候，遇到了一个问题（小白就是小白）TAT，问题实现很简单，但由于自己基础还没打牢，半天解决不了，问题如标题所述，实现效果如图：

要求：

用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

后来重新学习了下float浮动的相关知识，对此有了新的理解，发现前端不是那么容易的TAT

主要参照了网上写的比较好的博文，感觉很好理解：

CSS浮动(float,clear)通俗讲解

下面是理解后个人感觉最舒服的写法：

css代码如下

.left{
	width: 400px;
	height: 50px;
	background: red;
	float:left;
}

.middle{

	margin-right: 400px;
    margin-left: 400px;
    height: 50px;
    background: blue;
}
.right{
	width: 400px;
	height: 50px;
	float: right;
	background: yellow;
}

html代码：

<div class="left"> </div>
<div class="right"></div>
<div class="middle"></div>

学习完之后写了一次，犯了一点小错误， 错误代码如下

	<div class="left"> </div>
	<div class="middle"></div>
	<div class="right"></div>

第一次写的时候先写了middle的div,而middle是正常的标准流中的内容，也就是没有设置float属性，也就是后面right对应div的上一个元素（middle对应的div）不是浮动的，因此right的顶部总是和上一个元素的底部对齐,实际效果是这样的：

又仔细研读了网上博文，终于改对了，感谢大佬！

个人觉得原博文中比较精髓的内容如下（原文中有标注）：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

       div的顺序是HTML代码中div的顺序决定的。

前面的路还很长哇！