CSS3中浮动的处理 -float

一、浮动

1.用法

 float:right、left、none、inherit         --左浮动、右浮动、不浮动、继承父元素浮动

2.特性：

  使元素脱离标准流、文本自环绕、行内元素浮动后能够进行宽、高、边距等设置

3.副作用：元素塌陷

4.解决元素塌陷的方法

  1)父元素和子元素一起浮动   --在父元素中也增加相应的浮动

  2)给父元素设置宽高             --不会塌陷

  3)溢出解决                        

    .float{

     overflow:hidden;                          /*auto也可以，auto将溢出部门滚动，hidden则是直接将溢出部分截取*/

     zoom:1;                                      /*IE专属*/

}

   4)清除浮动

   在浮动子元素的下面加个盒子  <div class=".clear"></div>

      .clear{

    clear:both;                  /*指定不允许元素周围有浮动元素 left、right、both、none、inherit*/  

    }

5）伪类处理

     .floatElement ::after{

     clear:both;

     display:block;

    visibility:hidden;

    height:0;

  }