快速了解浮动

浮动的初衷
    浮动刚创建出来时，并不是为了实现块级元素并排显示的，是实现所谓的字围效果，即让文字绕着图片显示。由于文字是环绕在图片周围，所以浮动半脱离标准文档。如果是全脱离标准文档流，文字都会直接钻上去。
    但是，现在我们使用浮动，并不是为了字围效果，而是使用浮动让块级元素可以并排显示，进行网页的布局。
    如果不使用浮动，只按照标签的特征，进行的默认布局，从上到下，从左到右进行排列，块级元素独占一行，行内元素并排显示，这种布局方案叫流式布局。流式布局就是遵循标准文档流进行的布局方案。
        不足：不能让块级标签并排显示。

浮动布局：可以让块级元素在同一行上并排显示。
        让一个块级元素在同一行并排显示的方案比较多，浮动仅仅是其中的一个方案而已。
        一个元素浮动了，它并没有脱离父元素。
        如果一个父元素中的子元素都浮动了，儿子都出国了，就不能撑起父元素了，父元素的高度就变了0，也就是所谓的父元素高度塌陷。
        也就是说对父元素的高度造成了影响，清除这种影响，也就是如何清除浮动，可以使用overflow:hidden 。

浮动的特性  
    破坏性:破坏了流式布局，可以让块级元素并排显示。
            在CSS3中，提出更好的一种布局方案，叫flex布局。在移动端（手机，平板）开发，可以使用flex来代替浮动布局。
    字围效果:两个div，在没有设置的情况下，由于都是块级标签，所以会各自独占一行。如果上面的div发生浮动，下面的div就会钻上去，但是如果下面的div中有文字，文字没办法钻上去，会在原位不动。
    贴靠性:两个div，如果都向一个方向浮动，它们两个就会贴靠在一起，此时两个div就并排显示了。
    浮动的块级元素具有包裹性：必须是块级元素，并且这个块级元素没有明确的设置尺寸。如果一个块级元素的width没有设置，它的宽度就是父元素的宽度的100%。如果此时让它浮动了，它的宽度由内容来决定，尽可能地压缩空间。这就是块级元素浮动所产生的包裹性。里面有多少内容，它的宽度就是多少。
    浮动的行内元素会变成块级元素：一个行内元素浮动了，相当于做了一个变性手术，变了块级元素。
            对于一个行内元素，不能设置宽度和高度。但是如果你让它浮动了，那它就变成一块级元素，可以设置宽高。

    对于下面的代码，就显示的比较low了：
        span{
            float: left;   // 因为float:left就可以让span变成块级标签
            display: block;   // 此行代码是多余的
            width: 80px;
            height: 80px;
            background-color: gold;
        }

右浮动的元素写在前面：
        如果盒子中只有右浮动，没有左浮动，效果会有错行的效果。解决：把右浮动的元素写在前面。
        如果有左浮动，也有右浮动，那么谁写在前面（左浮动的元素或是右浮动的元素）都OK的。

浮动的理解：
        一个浮动的元素只会对它后面的元素造成影响，不可能对它前面的元素造成影响。
        一个右浮动的元素，先向上飘，飘到父元素边界时停止，然后向右飘，飘到父元素的边界就停止了。
    记住几句话：
        1）浮动的元素只会对它后面的元素造成影响
        2）如果一个块级元素没有浮动，这个元素肯定会独占一行
        3）浮动步骤：先上向  再向左/向右  停止
        4）两个浮动的元素会并排显示
      浮动元素超出父元素的高度，也会对后面的元素造成影响：
           解决：在受影响元素上面加上clear:both。
      如果一个父元素中的子元素都浮动了，父元素在没有设置高度的情况下，会塌陷。

清除浮动概述：
        浮动会造成影响，包含对两个方面的影响：
        1）对后面的兄弟元素造成影响；
        2）父元素造成影响：造成父元素的高度塌陷。
    解决对后面的兄弟元素造成影响：
        clear 解决对兄弟元素造成影响。 谁受影响了，就在谁的身上加上clear。
            clear取值：
                left ：清除左浮动所造成的影响。  代表后面的元素也不受影响。 只能清除左浮动所造成的影响，不能清除右浮动所造成的影响。
                right : 清除右浮动所造成的影响。只对右浮动有效。
                both : 清除左右浮动所造成的影响。 开发中，直接使用both就OK。
                none ： 默认值，表示不清除这种影响。

                    注意：
                        一个浮动的元素只能影响它后面的元素，前面的元素是影响不到的。
                        一个块级元素没有浮动，它肯定会独占一行的。
                        clear只能作用于块级元素，对于行内元素是没有效果。
     解决对父元素造成的影响：
          1）加高法   并不好   把高度限定死  往往高度是靠内容撑起来的   如果一个页面中高度是固定死的，也可以使用加高法。
          2）overflow:hidden 小偏方  最终的高度也是内容撑起的
             overflow：本意是用来处理溢出的。
                overflow取值：
                    hidden 溢出的内容会被隐藏掉，不可见。
                    scroll 溢出的内容 产生滚动条 通过滚动条可到全部的内容
                    visible 默认值  溢出的内容正常显示
                        溢出的内容的内容不占见面空间。
          3）让父元素也浮动起来
          4）使用clear清除对父元素造成的影响(内墙法)：
            1.给父元素添加一个子元素  这个子元素不浮动，添加到最后。
            2.给这个元素加上clear:both
            真实开发中，我们会使用after伪元素来清除浮动：
                伪类选择器：不存在的一个类  :hover
                伪元素：页面中不存在的一个元素      
            after伪元素：
                .father:after  表示在father元素的内部最后添加一个元素
                创建出来的伪元素默认并不是块级的，clear只能作用块级元素，所以说需要给这个伪元素添加display:block
                .father:after{
                    content:"hello";   新增加元素中的内容
                    clear: both;   用来清除浮动的
                    display: block;  让伪元素变成块级，默认是inline
                }
            提炼出一个清除浮动的类：
                .clearfix:after{
                    content: "";
                    clear: both;
                    display: block;
                }
                通常写法：
                .clearfix:after{
                    display: block;
                    content: "";
                    overflow:hidden;
                    height:0;
                    clear: both;
                    visibility: hidden;
                }
                .clearfix{*zoom:1}

浮动的应用场景：
        1）页面中的左右结构
            实现：
                父元素  .clearfix
                    左  float:left
                    右  float:right
        2）页面中多列布局
            实现：
                父元素     .clearfix
                    第1列  float:left
                    第2列  float:left
                    第3列  float:left
                    第4列  float:left
                    ..       
                    每一列中间的间隙。margin-right  
                    中间1px边框的问题  margin负值           
        3）左侧固定宽度，右侧自适应
            实现：
                父元素：  当父元素的宽度变化时，那么右侧的宽度也跟着变化
                    左侧  宽度必须  浮动
                    右侧  margin-left可以为左侧宽度
        4）页面中的左中右结构
            实现
                父元素： 不需要清除浮动
                    左：左浮动
                    中： text-align:center;  margin:0 auto;
                    右：右浮动