JSFiddle - React, Tailwind, and code Playground

HTML

为什么除了IE7以外的浏览器, 相邻元素中前面元素的子元素float:left会占后面元素的位置?
感觉IE7的表现是合理的.
<div>
	<div style="height: 50px; background-color: gray;">
		<div style="float:left;width: 50px;height: 100px;background-color: red;"></div>
		<div>aaa</div>
	</div>
	<div style="height: 50px; background-color: lightgray;">bbb</div>
</div>
<br><br><br>
为什么除了IE7以外的浏览器, float: right是在span同行的右侧浮动?而IE7下是会换行的?
<div style="width: 300px;">
	<span>TestTest</span>
	<div style="float: right">bbb</div>
</div>
<br><br><br>