Estoy tratando de entenderpor qu ¿hay alguna diferencia en cómo un navegador muestra <div> </div> versos <div />?

Aquí hay un ejemplo: la salida esperada del fragmento n. ° 1 es de tres cuadros, uno al lado del otro: [negro], [azul], [rojo]. El fragmento n. ° 2 solo muestra [negro] y [rojo] -Por qu ¿no se muestra el cuadro [azul] en el fragmento n. ° 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: estoy usando Chrome 12 y html5: <! doctype html>