3个DIV浮动的26个组合方式

在研究div浮动的时候，发现div在浮动的时候不仅仅会让父元素的高度塌陷，还会影响到其他的盒子（如图三个盒子）

.father{
    
        width: 500px;
        height:300px;
        margin:0 auto;
        border: 2px solid red;
    }
    .son1,.son2,.son3{
    
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 20px;
    }
    .son1{
    
        background-color:skyblue;
    }
    .son2{
    
        background-color: purple;
        
    }
    .son3{
    background-color: pink;

    }

<div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
        <div class="son3">son3</div>
    </div>

分成三种大情况来讨论就是：（假设用三个相同的盒子设置不同的浮动效果）
（一）只有一个盒子浮动
（二）只有两个盒子浮动
（三）三个盒子都浮动

列举如下：

（一）只有一个盒子浮动

1.1 第一个盒子左浮动

    .son1{
     
        background-color:skyblue;
        float: left;
    }
    

效果：第一个盒子左浮动后导致高度塌陷，第二个盒子向上挤，盒子挤上去了但是内容没有上去，第三个盒子和内容挤上到了第二个盒子的位置

1.2 第一个盒子右浮动

.son1{
     
        background-color:skyblue;
        float: right;
    }

效果：第一个盒子右浮动后，父元素高度塌陷，第二个盒子带着内容向上挤到靠近父元素的位置停止，第三个盒子跟在第二个盒子后面向上挤。

1.3 第二个盒子左浮动

.son2{
     
        background-color: purple;
        float: left;