浮动影响

一、浮动元素自动变块级元素

非浮动元素占据浮动元素位置，浮动元素不能占据非浮动元素位置？？？向上占据

浮动元素会被自动设置成块级元素，相当于给元素设置了display:block（块级元素能设置宽和高，而行内元素则不可以）。

 

浮动元素span
 
 
 

非浮动元素span
 
 

二、并列关系的盒子，不一致地浮动，位置问题

元素浮动会对后面非浮动的兄弟元素产生影响

可能情况

1. 后边若是非浮动行内元素，且因为定位产生重叠时，行内盒子模型压在该浮动元素之上

2. 后边若是非浮动块级元素，且在定位后产生重叠时，该块级的内容围绕该浮动元素显示，其他在该浮动元素底下

示例代码如下：

 

 
    浮动DIV
 

 
    跟在浮动元素后边的DIV
 

 
    跟在浮动元素后边的span
 
 

效果如下

不过在ie6这个效果却很怪异，如图：

浮动元素没有压在非浮动div之上，反而把span压住了。

解决办法

对被浮动影响的元素添加clear:both

三、并列关系的盒子，一致地同方向浮动，高度不一致问题

多个同方向浮动元素一般是按照流式布局，一行满了则自动换行，也就是类似于以下效果：

但各个浮动元素高度不一致的话效果很可能出现下边的情况：

原因

主要排列到元素7的时候，一行已经显示不下了，所以要换行，但此处换行并不是从行头开始，而是从元素5那开始，因为元素5比元素6高很多导致。

四、包含关系的盒子，

可能情况

里面盒子浮动，包住它的盒子不浮动时，父盒子背景无显示

原因

由于元素浮动后脱离了文档流，所以父元素是无法根据元素来自适应的。

解决办法1 clear:both

用法

在所有浮动元素后加:

 
TEST DIV
 
 
 

（1）有clear:both的：

（2）无clear:both的

原理

子元素浮动后，因为脱离文档流，所以父元素包含不住，无法撑开。由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。

解决办法2 overflow

用法

    
div1
    
div2

原理

在父元素上设置overflow这个属性，如果父元素的这个属性设置为auto或者是hidden，父元素就会扩展包含浮动，这个方法有着比较好的语义性，因为它不需要额外的元素，但是，要记住一点，overflow属性不是为了清除浮动而定义的，要小心不要覆盖住内容或者触发了不需要的滚动条。

解决办法3 clearfix类

用法

 



    
div1
    
div2

原理：

这种方式这样理解，就是利用伪类元素，也就是在有浮动的标签前面添加一个块级元素，来达到效果。