CSS 浮动流

浮动流是一种"半脱离标准流"的排版方式

浮动流只有一种排版方式, 就是水平排版，而且只能水平方向移动。 它只能设置某个元素左对齐或者右对齐。

浮动元素的脱标

脱标: 脱离标准流，当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标

<style>
        .box1{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .box4{  float: left;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }</style>

结果展示：

解释说明： 

4个div的标准流顺序：从上到下依次是box1，box2，box3，box4

移动顺序：

1. box1浮动，234顶上去，2到1的位置，3到2的位置，4到3的位置，之后box1水平向左移动到上图的位置
2. box2没有float，仍然停留在步骤1的位置
3. Box3浮动，4顶替3的位置，这时3水平向左移动到上图的位置
4. Box4浮动，水平向左移动，跟随在3的后面，移动到上图的位置

浮动元素字围现象

 div{
            float: left;
            width: 100px;
            height: 100px;
            /*background-color: red;*/
            border: 1px solid #000;
        }
        p{
            width: 500px;
            height: 500px;
            background-color: yellow;