CSS-浮动

普通流

CSS有三种定位机制，普通流（标准流）、浮动、定位。
　　普通流、标准流、文档流实际上就是一个网页内标签元素从上到下，从左到右排列顺序的意思，按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

浮动

  元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程，浮动的元素总是找离它最近的父级元素对齐，不会压住父盒子的padding和margin值的。
left 元素向左浮动
right 元素向右浮动
none 元素不浮动
  浮动元素的排列位置跟上一个元素有关系，如果上一个元素有浮动，那么浮动元素的顶部会跟上一个元素的顶部在同一高度，浮动元素左侧和上一个元素的右侧紧挨；如果上一个元素是标准流，则浮动元素的顶部会和上一个元素的底部对齐。
总结：
  一个父盒子里面的子盒子，如果其中一个子级有浮动，则其他子集都需要浮动，这样才能一行对齐显示；
  元素添加浮动后，元素会具有行内块元素的特性，元素的大小完全取决于定义的大小或者默认的内容多少；
  浮动根据元素书写的位置来显示相应的浮动。
浮：加了浮动的元素盒子是浮动起来的，漂浮在其他的标准流盒子上面；
漏：加了浮动的盒子，不占位置，它浮起来了，原来的位置漏给了标准流的盒子；
特：这是特殊的使用，有很多不好处，使用要谨慎。

清除浮动的方法

  正常标准流盒子下，子盒子是标准流，父盒子虽然没有高度，但是会撑开父盒子的高度；但当子盒子浮动时，就会脱离正常标准流，父盒子没有设置高度，高度就为0，不会撑开父盒子。父盒子外边如果有盒子的话就会上移。所以可以清除浮动。
  其实本质叫做闭合浮动更好一些，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。在css中，clear属性用于清除浮动。

额外标签法

W3C推荐的做法是，在浮动盒子的后面添加一个空盒子。

.clear{
    clear:both;
}

优点：
通俗易懂，书写方便
缺点：
添加许多无意义的标签，结构化比较差。

父元素添加overflow属性

overflow:hide/auto/scroll

触发BFC，BFC可以清除浮动
优点：
代码简洁
缺点：
内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

在父元素上面设置

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

*代表ie6、7能识别的特殊符号，带有这个*的属性，只有ie6、7才能执行；
zoom就是ie6、7清除浮动的方法。
优点：
符合闭合浮动思想，结构语义化正确
缺点：
由于ie6、7不支持after，使用zoom触发

双伪元素清除浮动

.clearfix:before, .clearfix:after{
    content:’’;
    display:table;     //触发bfc防止外边距合并问题
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}

优点：
代码更简洁
缺点：
由于ie6、7不支持after，使用zoom触发hasLayout