浮动影响
一、浮动元素自动变块级元素
非浮动元素占据浮动元素位置，浮动元素不能占据非浮动元素位置？？？向上占据
浮动元素会被自动设置成块级元素，相当于给元素设置了display:block（块级元素能设置宽和高，而行内元素则不可以）。
<div style="height: 200px; width: 200px;">
<span style="float: left; width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red; background-color: Olive;">浮动元素span</span>
</div>
<div style="height: 200px; width: 200px;">
<span style="width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red; background-color:Olive;">非浮动元素span</span>
</div>
二、并列关系的盒子，不一致地浮动，位置问题
元素浮动会对后面非浮动的兄弟元素产生影响
可能情况
- 后边若是非浮动行内元素，且因为定位产生重叠时，行内盒子模型压在该浮动元素之上
- 后边若是非浮动块级元素，且在定位后产生重叠时，该块级的内容围绕该浮动元素显示，其他在该浮动元素底下
示例代码如下：
<div style="width: 600px; height: 500px; border: solid 1px blue; background-color: yellow;">
<div style="float: left; width: 250px; height: 250px; border:
solid 1px Aqua; background-color: gray; margin: 10px 0 0 10px;">
浮动DIV
</div>
<div style="background-color: red; width: 300px; height: 150px;">
跟在浮动元素后边的DIV
</div>
<span style="background-color: red; margin: 0 0 0 -50px;">
跟在浮动元素后边的span
</span>
</div>
效果如下
不过在ie6这个效果却很怪异，如图：
浮动元素没有压在非浮动div之上，反而把span压住了。
解决办法
对被浮动影响的元素添加clear:both
三、并列关系的盒子，一致地同方向浮动，高度不一致问题
多个同方向浮动元素一般是按照流式布局，一行满了则自动换行，也就是类似于以下效果：
但各个浮动元素高度不一致的话效果很可能出现下边的情况：
原因
主要排列到元素7的时候，一行已经显示不下了，所以要换行，但此处换行并不是从行头开始，而是从元素5那开始，因为元素5比元素6高很多导致。
四、包含关系的盒子，
可能情况
里面盒子浮动，包住它的盒子不浮动时，父盒子背景无显示
原因
由于元素浮动后脱离了文档流，所以父元素是无法根据元素来自适应的。
解决办法1 clear:both
用法
在所有浮动元素后加: <div style="clear:both;height:0px;"></div>
<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="clear:both;"></div>
</div>
原理
子元素浮动后，因为脱离文档流，所以父元素包含不住，无法撑开。由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。
解决办法2 overflow
用法
<style>
.box{
background-color: yellow;
overflow:atuo; //或者是hidden，.box是父盒子
}
.box1{
width: 100px;
height: 100px;
background-color: green;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="box">
<div class="box1">div1</div>
<div class="box2">div2</div>
</div>
</body>
原理
在父元素上设置overflow这个属性，如果父元素的这个属性设置为auto或者是hidden，父元素就会扩展包含浮动，这个方法有着比较好的语义性，因为它不需要额外的元素，但是，要记住一点，overflow属性不是为了清除浮动而定义的，要小心不要覆盖住内容或者触发了不需要的滚动条。
解决办法3 clearfix类
用法
<style>
.clearfix:after{ content:""; display:table; height:0;
visibility:both; clear:both;}
.clearfix{*zoom:1; /* IE/7/6*/}
</style>
<body>
<div class="box clearfix">
<div class="box1">div1</div>
<div class="box2">div2</div>
</div>
</body>
原理：
这种方式这样理解，就是利用伪类元素，也就是在有浮动的标签前面添加一个块级元素，来达到效果。
