html纵向占位置,关于CSS的浮动后元素垂直位置的问题

* {

font-family: "微软雅黑";

}

.wrap {

width: 300px;

height: 400px;

border: solid 2px red;

}

.a {

width: 70px;

height: 200px;

background-color: orange;

float: left;

}

.b {

width: 150px;

height: 50px;

background-color: green;

float: left;

}

.b2 {

width: 70px;

height: 150px;

background-color: red;

float: left;

}

.c {

width: 100px;

height: 150px;

background-color: yellow;

float: left;

}

A

B

B2

C

问题：C元素的位置不是在A的左下方，而是在这个鬼地方，为什么会这样？

注意到，C的上方和B2好像的平齐的。C元素被挤下去后的垂直位置和B2有关系吗？

如果将B高度设置和A一样，C就从最左边排起了。

单单更改B2的高度，C垂直位置也会改变，但是保持C的上方和B2下方平齐。

隐约感觉C和B2的关系，但是看不出。

求大神解答或者相关链接供解读，谢谢！