简单演示一下浮动的效果

---

一、什么是浮动？

float:left; 让块状元素向左浮动，添加了float属性后，块状元素将脱离标准文档流。
标准文档流：页面中元素按照其原有的特性进行排列
脱离标准文档流：给块状元素添加了浮动之后，块状将不会按照标准文档的排列顺序进行排列，而会进行位置移动

二、先演示没用浮动的情况

1.先创建三个div

代码如下（示例）：

        <div class="div1">
            div1
        </div>
        <div class="div2">
            div2
        </div>
        <div class="div3">
            div3
        </div>

2.给三个div三个不同的背景颜色，同时给div一个长和宽

代码如下（示例）：

div{
        width: 100px;
        height: 100px;
    }
.div1{
        background-color: red；
    }
    .div2{
        background-color: deeppink;
    }
    .div3{
        background-color: cyan;
    }

3.效果显示

因为div是块状元素，所以每一个都单独占一行，所以效果就是这样的

---

三、添加浮动

1.我们给div1 , div2添加浮动

.div1{

        background-color: red;
        float: left;

    }
    .div2{
        background-color: deeppink;
        float: left;


    }
    .div3{
        background-color: cyan;

    }

2.效果演示

我们可以看到div3的颜色没了，那是因为div1 和div2 脱离了标准文档流，div3因为是块状元素，所以单独占一行，所以会上移到div1的位置，但是被div1覆盖了，所以没有显示。

3.给div3也添加浮动

.div1{

        background-color: red;
        float: left;

    }
    .div2{
        background-color: deeppink;
        float: left;


    }
    .div3{
        background-color: cyan;
        float: left;

    }

4.效果演示

5.给div3清楚浮动

.div3{
        background-color: cyan;
        float: left;
        clear: both;/*清楚浮动*/

    }

6.效果演示

这样我们就又能看到div3了。

总结

浮动就是让资源能得到更好的利用，也让页面看上去更好看，而且也很方便。