极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
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;
}
</style>
</head>
<body>
<div class="wrap">
<div class="a"><span>A</span></div>
<div class="b"><span>B</span></div>
<div class="b2"><span>B2</span></div>
<div class="c"><span>C</span></div>
</div>
</body>
</html>JSbin
问题：C元素的位置不是在A的左下方，而是在这个鬼地方，为什么会这样？
- 注意到，C的上方和B2好像的平齐的。C元素被挤下去后的垂直位置和B2有关系吗？
- 如果将B高度设置和A一样，C就从最左边排起了。
- 单单更改B2的高度，C垂直位置也会改变，但是保持C的上方和B2下方平齐。
隐约感觉C和B2的关系，但是看不出。
求大神解答或者相关链接供解读，谢谢！
html5
如果这个盒子是左浮动,而且在原文档中较早的时间也生成了一些左浮动盒子.对于这样每一个较早的盒子.当前盒子的左边缘,必须在较早盒子的右边缘的右边.或其顶部必须低于较早的盒子的底部。类似的规则适用于右浮动盒子。