要弄懂浮动首先要了解标准流的概念

标准流（normal flow)是指在html中标签元素按照默认方式排列下的布局

默认方式下块级元素单独占一行，而文字和行内块元素则从左往右依次排列。

举个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a {
            background-color: deeppink;
            width: 100px;
            height: 100px;
        }
        .b {
            background-color: aliceblue  ;
            width: 100px;
            height: 100px;
        }
        .c {
            background-color: greenyellow;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

</body>
</html>

在浏览器下的显示效果：

我们定义三个div盒子，给定了宽度，然而同级的盒子之间仍然另起一行显示

可见，标准流情况下div标签下的元素哪怕给定了宽度，同级的另一个div标签依然会另起一行显示。

然而在实际运用中，很多时候需要我们把多个盒子放到一列中显示，这时候就需要用到浮动了

什么是浮动？

浮动就是取消标准流的格式，让块级元素可以在同一行中显示。

在css中浮动的写法：

选择器{float: 属性值;}

float有四个属性值：

left	向左浮动
right	向右浮动
none	不浮动（标准流）
inherit	继承父级元素的浮动属性

浮动与标准流的关系

1.浮动与标准流下的块级元素。

给上面的例子加入浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a {
            background-color: deeppink;
            width: 100px;
            height: 100px;
            float: left;
        }
        .b {
            background-color: aliceblue;
            width: 100px;
            height: 100px;
            float: right;
        }
        .c {
            background-color: greenyellow;
            width: 100px;
            height: 100px;
            float: none;
        }
    </style>
</head>
<body>
<div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

</body>
</html>

结果是这样的：