清除浮动

关于浮动的两个概念：

• 文档流： 文档中可显示对象在排列时所占用的位置
• 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

浮动的特征：

1. 块在一排显示
2. 内联支持宽高
3. 默认内容撑开宽高
4. 脱离文档流

清除浮动：

• clear:left|right|none|both|inherit:元素的某个方向上不能有浮动的元素
• clear：both:在左右两侧都不允许浮动元素

为什么要清除浮动：

• 两张图说明问题：
  
  1. 代码：
     
  2. 效果图：
     

分析出现的原因：

原因很简单，首先浮动的概念是脱离了文档流，所以说warp和box就应该是同级的关系了。而box因为没有设置宽高，所以就会出现上图的情况

解决方案：

• 加高度。但是扩展性不好。比如瀑布流
• 父级浮动。给页面中所有的元素都加浮动。但是margin左右会失效
• inline-block清除。但是margin左右会自动失效
• 空标签清除（在加一个标签然后clear:both）。但是IE6会有2px的偏差
• br清除。但不符工作中结构样式行为三者分离的要求。
• :after伪类（现主流方法）。
  代码如下

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

• overflow:hidden:通过设置父元素overflow值设置为hidden。