css:divの子ノードがdivに囲まれない

divの子ノードにcssでfloatが指定されていると、何故かdivの高さが無くなり子ノードが囲まれなくなる。

対処としては親ノードのdivにもfloatを指定する。

<div id="ddd" style="border: solid 1px red;"><span id="sss">あいうえお</span></div>
<script>
var d=document.getElementById("ddd");
var s=document.getElementById("sss");
alert("height="+d.offsetHeight);
if (typeof(s.style.styleFloat)=="undefined") {
	s.style.cssFloat="right";
} else {
	s.style.styleFloat="right";
}
alert("height="+d.offsetHeight);

if (typeof(d.style.styleFloat)=="undefined") {
	d.style.cssFloat="left";
} else {
	d.style.styleFloat="left";
}
// FireFox, Chrome は↓が無いと幅がspanの幅と同じになる
d.style.width="100%";
alert("height="+d.offsetHeight);