浮动的作用就是为了脱离文档流，不再占据原来的位置。元素无法感知到浮动元素的存在；但是，浮动的元素之间是可以互相感知的。
浮动对于文字的影响和对于普通块级元素的影响不同。

• 两个浮动元素之间，会紧挨着；并且浮动后，块级元素不再占据一行，只再占据自身的宽度。

<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        background-color: green;
    }
    .first{
        float: left;
    }
    .twice{
        float: left;
    }
</style>
<div>1</div>
<div>2</div>

另外，需要注意的是，渲染顺序还是按照 html 文本顺序，从上至下。即

<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        background-color: green;
    }
    .first{
        float: left;
    }
    .twice{
        float: right;
    }
    .third{
        float: right;
    }
</style>
<div class="first">1</div>
<div class="twice">2</div>
<div class="third">3</div>

• 浮动元素和文字之间。文字会包围浮动元素，但是浮动元素会遮挡背景。

<style>
    div{
            width: 100px;
            height: 100px;
            border: 1px solid green;
            background-color: rgba(0,0,255,0.5);
            float: left;
        }
    p{
            word-wrap: break-word;
            background-color: red;
        }
</style>
<div>2</div>
<p>123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789</p>