Javascript 为什么这两个代码段不产生相同的输出？

我要做的是用这段代码生成相同的东西两次。目标是让“测试提示：”显示在左边，然后是右边的文本框，最后是直接显示在右边的16x16像素框

在HTML生成阶段，我取得了成功，但我正试图以一种在旧的web浏览器（如InternetExplorer7）中工作的格式，用javascript完全生成HTML。我在我的电脑上用一个更新的浏览器（opera 11）测试了它，结果发现16x16像素的框就在提示符的正下方。我该如何着手解决这个问题

<h2>HTML generation of the form</h2>
<form>
  <div style="overflow:hidden;width:100%">
    <b style="float:left;background:#777">Test prompt:</b>
    <input type="text" style="float:left">
    <div style="float:left;background:#AAA;width:16px;height:16px"></div>
  </div>
</form>
<h2>Javascript generation of the same form</h2>
<!-- This phase does not work correctly -->
<div ID="CONTAINER">
</div>

<script>
  c=document.getElementById('CONTAINER'); //get container
  f=document.createElement('FORM'); //make form

  d=document.createElement('DIV'); //make containing DIV
  ds=d.style;
  ds.overflow='hidden';
  ds.width='100%';

  b=document.createElement('B'); //make prompt label
  b.innerHTML='Test prompt:';    //and set prompt
  bs=b.style;
  bs.float='left';
  bs.background='#777';

  i=document.createElement('INPUT'); //make textbox
  i.type='text'; //<-- not sure if I need this
  i.style.float='left';

  ed=document.createElement('DIV'); //Make 16x16 box
  eds=ed.style;
  eds.float='left'; 
  eds.background='#AAA';
  eds.width='16px';
  eds.height='16px';

  c.appendChild(f);//add form
  f.appendChild(d); //ad container div

  d.appendChild(b); //add prompt
  d.appendChild(i); //add textbox
  d.appendChild(ed); //add square box
</script>

HTML表单的生成
测试提示：
相同表单的Javascript生成
c=document.getElementById（'CONTAINER'）//获取容器
f=document.createElement（'FORM'）//形成
d=document.createElement（'DIV'）//使包含DIV
ds=d.style；
ds.overflow='hidden'；
ds.width='100%'；
b=document.createElement（'b'）//做提示标签
b、 innerHTML='Test prompt:'//并设置提示
bs=b.风格；
b.浮动='左'；
背景=#777'；
i=document.createElement（“输入”）//制作文本框
i、 type='text'//FWIW，该代码在Chrome（在Ubuntu上）@JoeAndrieu-Yup中运行良好，在Safari中，在JSFiddle中进行了尝试，并在新安装的Opera中运行良好。这一定是浏览器问题。最后，我不得不在类中声明浮点，然后在javascriptFYI中使用它-在firefox 43和45、Chrome 47、Internet Explorer 5、7、8、9、10和11以及Edge 13中都可以正常工作-如果您从未清除浮点元素，一些较旧的浏览器会出现奇怪的布局问题-但您描述的问题不会出现（没有人可以重现）