float的使用和带来的影响处理

 float 的使用

float：定义元素在哪个方向浮动
 属性值：
  left	元素向左浮动。
  right	元素向右浮动。
  none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
 说明：
   以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。
   浮动元素会生成一个块级框，而不论它本身是何种元素类型。
   浮动会让元素变成块状元素。
 分类
   双标签 单标签：根据有无单独结束标签进行分类
 元素类型
   块状元素  行内元素：根据标签在浏览器中显示的特征
       块状元素：div p h3 ol li ul dl dt dd 
         A:自占一行
         B:可以设置宽度和高度
         C：在没有设置宽度的情况下，宽度与父元素同宽
       行内元素：em i b strong a sup sub span del 
         A: 可以和其他行内元素在一行内并列显示
         B：不可以设置宽度和高度，大小根据内容多少而定

高度塌陷和浮动清除方法

当子元素有浮动并且父元素没有高度的情况下父元素高度为0，会称为高度塌陷
解决方法：
（1）给父元素添加声明overflow:hidden;(触发一个BFC)
（2）在浮动元素下方添加空div,并给该元素添加声明
        div{clear:both; height:0; overflow:hidden;}
（3）万能清除浮动法
   选择符:after{
    content:"";
    display:block;
    clear:both;  
    height:0;
    overflow:hidden;
    visibility:hidden;
   }
clear: 属性规定元素的哪一侧不允许其他浮动元素。
  属性值：
    left	在左侧不允许浮动元素。
    right	在右侧不允许浮动元素。
    both	在左右两侧均不允许浮动元素。
    none	默认值。允许浮动元素出现在两侧。