【css基础学习四之浮动和为什么要清除浮动和清除浮动的四种方法】

1.浮动---float 
设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定位置的过程。
浮动的目的就是为了让多个块级元素同一行上显示
在css中 通过float定义浮动
选择器{float:属性值;}

left 元素向左浮动
right 元素向右浮动
none  不浮动(默认)

注意：浮动脱离标准流，脱标，不占位置，会影响标准流。浮动只有左右浮动
 1.浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近
   的父级元素对齐。但是不会超出内边距的范围。
2. 一个父盒子里面的子盒子，如果其中一个子级有浮动的，
   则其他子级都需要浮动。这样才能一行对齐显示。
3. 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的
   大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

为什么要清除浮动?
  为了解决父级元素因为子级浮动引起内部高度为0的问题。
  即父盒子没有高度的时候，子盒子浮动不占位置，会导致父盒子高度为0。

2.清除浮动的方法

 （1） 额外标签法

      选择器{clear:属性值;}  //clear 清除

      属性值
       left    不允许左侧有浮动元素(清除左浮动)
       right    不允许右侧有浮动元素(清除右浮动)
     both    同时清除左右两侧浮动的影响
     
       <div style="clear:both"></div>

  (2) 父级元素添加overflow属性方法
       overflow:hidden;
       overflow:auto;
  (3)after伪元素清除浮动
   
      .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

      .clearfix {*zoom: 1;}   /* IE6、7 专有 */

  (4)使用before和after双伪元素清除浮动
     
    .clearfix:before,.clearfix:after { 
         content:"";
          display:table;  
    }
    .clearfix:after {
               clear:both;
    }
    .clearfix {
          *zoom:1;
    }