Estou tentando entenderporqu existe uma diferença em como um navegador exibe <div> </div> versos <div />?

Aqui está um exemplo: A saída esperada do trecho 1 é de três caixas, lado a lado: [preto], [azul], [vermelho]. O fragmento 2 mostra apenas [preto] e [vermelho] -Por qu a caixa [azul] não é renderizada no snippet # 2?

1:

<div style="float:left; width:50px; height:50px; background:black;"></div>

<div style="float:left; width:50px; height:50px; background:blue;"></div>

<div style="float:left; width:50px; height:50px; background:red;"></div>

2:

<div style="float:left; width:50px; height:50px; background:black;"></div>

<div style="float:left; width:50px; height:50px; background:blue;" />

<div style="float:left; width:50px; height:50px; background:red;"></div>

Edit: estou usando o Chrome 12 e html5: <! doctype html>