float浮动
float 属性介绍：
HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。如导航列表，利用浮动特性排成一行！
有2个特点：
1：元素浮动之后，该元素已经脱离了文档标准流。
如果他后边的元素如果没有浮动，也没有清除浮动的话，后面的元素会当这个浮动元素不存在直接占据其位置。
2：元素浮动之后，将会全部转换为行内元素。
也就是说他如果以前是块级元素的DIV。浮动之后将不在独占一行。但他的宽度和高度是依然有效的，这又和真正行内元素有所区别。
① left ：元素向左浮动。
② right ：元素向右浮动。
③ none ：默认值。
④ inherit ：从父元素继承float属性。
- 文档流：在html中文档流即为元素从上至下排列的顺序。
- 脱离文档流：元素从正常的排列顺序被抽离。
- 最左边/最右边：上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）。
浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。
内联元素：有空隙就插入。
关于父级元素之内的浮动影响：
举例如下：
1.对父级元素影响：
我们都知道，正常情况下，如果父级元素没有定义高度，那么其高度是由子元素撑开的。但是如果对子元素设置了浮动，会造成塌陷。
如下实例：所有的块级元素均没有定义高度。
图一：正常情况 图二：父级元素有内容：子元素float：left 图三：父级元素没有内容：子元素float：left
（图1）
图1备注：红色矩形 father 包含了child1 和child2 。
（图2）
图2说明：
子元素float之后，会脱离当前正常的文档流，造成父级元素塌陷。注意：由于这里设置了padding：10px，有内容填充，故我们还能看到父级元素的红色矩形。下面当父级元素无内容时候，父级元素高度就全部变为0了。是这样：如图三
拓展：
同时，子元素浮动对父级元素之外的其他元素也带来了影响。父元素之外的非浮动元素会无视浮动元素（child1 和child2），好像浮动元素跑到了另一个独立的世界里。
2.对子元素的影响：
图四：父级元素没有高度，宽度，设置为：float：left ；但是子元素具有不同的宽度。
图4
结论：父级元素的宽度等于子元素的最大宽度；高度没有塌陷。
以下是：图五，子元素分2部分，一部分有宽度，一部分没有设置宽度。图中可见：没有定义宽度的子元素child2,child3宽度都是等于child1.
图5
图6
3.对兄弟元素的影响：这一部分我用到了linxz的关于float研究的动态改变条件的网站平台。
图7：IE7下对块级非浮动元素的影响
图8：IE8+下，对块级非浮动元素的影响
图9：IE8+ 中2个子元素浮动
下面是在学习中遇到的一个有意思的问题：
<div class="box1“style="width:100px;float:left;">猜猜我的颜色</div>
<div class="box2"style="background:yellow">猜猜我的宽度</div>
答案：不是唯一。
我分为以下3种情况：
1）如果父级元素没有内容，div1自身没有设置背景色，div1和div2的内容都很少：会是下面的情况：
答案：div1的背景是div2的背景色；div2的宽度自适应。
2）如果父级元素没有内容，div1自身没有设置背景色，div2的内容很多：会是下面的情况：
答案：div1的背景是div2的背景色；div2的宽度等于父级元素宽度。
3）如果父级元素有内容但有背景色，div1自身没有设置背景色，div2的内容很多：会是下面的情况：
答案：div1的背景有一部分是div1和div2交叉部分的背景色，一部分是父级元素的背景色；div2的宽度等于父级元素宽度。
4）如果div1自身设置背景色，那就要看本来面目啦：
总结：
