css浮动及清除浮动

1. 浮动

   1. 特点：

      1.不占原来的位置（脱标）

      2.可以让块级元素在一行上显示    

      3.浮动可以把行内元素转化为行内块元素

2 清除浮动

    清除浮动指的是清除浮动的影响

   注意：

     当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱。这种情况下进行清除浮动。

3  清除浮动的几种方式

      1.使用clear:left|  right  | both

          Clear:both;

       这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动，空标签可以是div标签，也可以是P标签等，并为其定义CSS代码：clear:both。

    

     2.给父盒子设置overflow:hidden

       此方法解决了通过空标签元素清除浮动而增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow，我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible。 

       如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动。

    3.使用伪元素清除浮动

          .clear:after{

                 content:'';

                 display:block;

                visibility:hidden;

                height:0;

                line-height:0;

               clear:both 

          }

           .clear{

           zoom:1      /*解决兼容IE浏览器*/

           }

4 Overflow的使用

      1. hidden     将超出部分进行隐藏

        

       2.auto

  如果内容超出盒子，那么给盒子设置滚动条，如果内容没有超出盒子，那么不显示滚动条。

      3.scorll

          添加滚动条