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;}

效果：第一个盒子不动且独占一行，第二个盒子左浮动后，高度塌陷，第三个盒子挤上去，但是内容挤不上去。

1.4 第二个盒子右浮动

.son2{background-color: purple;float: right;}

效果：第一个盒子不动且独占一行，第二个盒子浮动到右边造成高度塌陷，第三个盒子带着内容向上挤。

1.5 第三个盒子左浮动

.son3{background-color: pink;float: left;}

效果：第一个盒子和第二个盒子不动且各自独占一行，第三个盒子左浮动

1.6 第三个盒子右浮动

.son3{background-color: pink;float: right;}

效果：第一个盒子和第二个盒子不动且各自独占一行，第三个盒子右浮动

（二）只有两个盒子浮动

2.1 第一个盒子左浮动，第二个盒子左浮动

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

效果：第一个盒子左浮动，第二个盒子左浮动后并排紧靠，由于浮动造成高度的塌陷，第三个盒子向上挤，但是内容没有上去。

2.2 第一个盒子左浮动，第三个盒子左浮动

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

效果：第一个盒子左浮动造成高度塌陷，第二个盒子向上挤且独占一行但是内容留下，第三个盒子向上挤，停在第二个盒子下面内容与留下的第二个盒子重合。

2.3 第一个盒子左浮动，第二个盒子右浮动

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

效果：第一个盒子左浮动，第二个盒子右浮动去了右边，浮动造成高度塌陷，第三个盒子向上挤，内容没办法挤上去。

2.4 第一个盒子左浮动，第三个盒子右浮动

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

效果：第一个盒子左浮动造成高度塌陷，第二个盒子向上挤独占一行，内容没有上去，第三个盒子只能在第二个盒子下面进行右浮动。

#### 2.5 第一个盒子右浮动，第二个盒子左浮动

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

效果：第一个盒子右浮动，第二个盒子左浮动，浮动造成的内容塌陷，第三个盒子向上挤，内容没有挤上去。

2.6 第一个盒子右浮动，第三个盒子左浮动

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

效果：第一个盒子右浮动造成高度塌陷，第二个盒子向上挤，内容也挤上去了且独占一行，第三个盒子只能在第二个盒子下面左浮动。

#### 2.7 第一个盒子右浮动，第二个盒子右浮动

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

效果：第一个盒子和第二个盒子进行右浮动后并排紧靠且高度塌陷，第三个盒子向上挤，内容也挤上去了。

2.8 第一个盒子右浮动，第三个盒子右浮动

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

效果：第一个盒子右浮动后高度塌陷，第二个盒子和内容向上挤了上去且独占一行，第三个盒子只能在第二个盒子下面右浮动。

2.9 第二个盒子左浮动，第三个盒子左浮动

.son2{background-color: purple;float: left;}.son3{background-color: pink;float: left;}

效果：第一个盒子不动且独占一行，第二个盒子和第三个盒子左浮动并排紧靠。

2.10 第二个盒子左浮动，第三个盒子右浮动

.son2{background-color: purple;float: left;}.son3{background-color: pink;float: right;}

效果：第一个盒子不动且独占一行，第二个盒子左浮动靠左，第三个盒子右浮动靠右。

2.11 第二个盒子右浮动，第三个盒子右浮动

.son2{background-color: purple;float: right;}.son3{background-color: pink;float: right;}

效果：第一个盒子不动且独占一行，第二个盒子和第三个盒子右浮动并排紧靠，且第二个盒子在第三个盒子的右边。

2.12 第二个盒子右浮动，第三个盒子左浮动

.son2{background-color: purple;float: right;}.son3{background-color: pink;float: left;}

效果：第一个盒子不动且独占一行，第二个盒子右浮动，第三个盒子左浮动。

（三）三个盒子都浮动

3.1 第一个盒子左浮动，第二个盒子左浮动，第三个盒子左浮动

.son1{background-color:skyblue;float: left;}.son2{background-color: purple;float: left;}.son3{background-color: pink;float: left;}

效果：第一、二、三个盒子左浮动后并排紧靠。

3.2 第一个盒子左浮动，第二个盒子左浮动，第三个盒子右浮动

.son1{background-color:skyblue;float: left;}.son2{background-color: purple;float: left;}.son3{background-color: pink;float: right;}

效果：第一、二个盒子左浮动后并排紧靠，第三个盒子右浮动和他们并排不紧靠。

3.3 第一个盒子左浮动，第二个盒子右浮动，第三个盒子右浮动

.son1{background-color:skyblue;float: left;}.son2{background-color: purple;float: right;}.son3{background-color: pink;float: right;}

效果：第一个盒子左浮动和他们并排不紧靠，第二、三个盒子右浮动后并排紧靠。

3.4 第一个盒子左浮动，第二个盒子右浮动，第三个盒子左浮动

    .son1{background-color:skyblue;float: left;}.son2{background-color: purple;float: right;}.son3{background-color: pink;float: left;}

效果：第一、三个盒子左浮动后并排紧靠，第二个盒子右浮动和它们并排不紧靠。

3.5 第一个盒子右浮动，第二个盒子右浮动，第三个盒子右浮动

.son1{background-color:skyblue;float: right;}.son2{background-color: purple;float: right;}.son3{background-color: pink;float: right;}

效果：第一、二、三个盒子并排紧靠。但是顺序是从右向左一、二、三

3.6 第一个盒子右浮动，第二个盒子右浮动，第三个盒子左浮动

    .son1{background-color:skyblue;float: right;}.son2{background-color: purple;float: right;}.son3{background-color: pink;float: left;}

效果：第一、二盒子并排紧靠，第三个盒子左浮动和它们并排不紧靠。

3.7 第一个盒子右浮动，第二个盒子左浮动，第三个盒子左浮动

    .son1{background-color:skyblue;float: right;}.son2{background-color: purple;float: left;}.son3{background-color: pink;float: left;}

效果：第一个盒子右浮动和它们并排不紧靠，第二、三个盒子左浮动并排紧靠。

#### 3.8 第一个盒子右浮动，第二个盒子左浮动，第三个盒子右浮动

    .son1{background-color:skyblue;float: right;}.son2{background-color: purple;float: left;}.son3{background-color: pink;float: right;}

效果：第一、三个盒子右浮动并排紧靠，第二个盒子左浮动和它们并排不紧靠。

（四）总结

1）浮动的元素只会对它后面的元素造成影响
2）如果一个元素没有浮动，这个元素肯定会独占一行
3）浮动的时候是元素是先向上，再向左/右，然后停止
4）两个浮动元素会并排显示