CSS浮动

介绍CSS浮动，浮动对父级元素和布局的影响，以及清除浮动的方法。

1. CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

2. 浮动的影响

2.1 浮动对父级元素的影响

父级元素出现高度坍塌的问题。

解析：当没有为父元素设置高度时，父级元素的高度是由子元素的高度撑开的，当子元素浮动之后，就会脱离文档流，相当于是不存在于父级元素中，那么父级元素的高度就会塌陷为“0”。

2.2 浮动对布局的影响

1.浮动能实现多个块元素处于同一行；
2.子级浮动会使父级出现高度塌陷问题；
3.浮动元素会对后面的兄弟级元素造成影响。

3. 清除浮动

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框中由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要清除浮动，使其包含框表现出正常的高度。

3.1 使用空标签清浮动

<div>  
  <div style="float:left;"></div>  
  <div style="float:left;"></div>  
  <div style="clear:both;"></div>  
</div>

优点：通俗易懂，容易掌握
缺点：增加无意义的空标签，后期维护不方便，不推荐使用。

3.2 使用br标签清浮动

<div>  
  <div style="float:left;"></div>  
  <div style="float:left;"></div>  
  <br clear="all" />  
</div>

优点：比空标签方式语义稍强，代码量较少。
缺点：同样有违结构与表现的分离，不推荐使用。

3.3 父级div定义 overflow: hidden

通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；

<div style="overflow:hidden; *zoom:1;">  
  <div style="float:left;"></div>  
  <div style="float:left;"></div>  
</div>

优点：不存在结构和语义化问题，代码量极少。
缺点：无法显示溢出部分，不推荐使用。

3.4 让父级发生浮动

优点：不存在结构和语义化问题，代码量极少。
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用。

3.5 利用after伪元素清浮动

<div class＝"clearfix">
  <div style="float:right;"></div>
  <div style="float:left;"></div>
</div>

.clearfix {*zoom:1;}
.clearfix:after {
    content:'.';
    display:block;
    height:0px;
    clear:both;
    visibility: hidden; 
}

1.content:"."; 生成内容作为最后一个元素
2.display:block; 使生成的元素以块级元素显示，占满剩余空间;
3.height:0px; 避免生成内容破坏原有布局的高度。
4.visibility:hidden; 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

优点：结构和语义化完全正确，代码量居中。
缺点：复用方式不当会造成代码量增加。