Perché il float CSS non cambia la larghezza del seguente div?

Come capisco float:left , spingerà l’elemento successivo a sinistra anziché su una nuova riga.

Nel seguente esempio mi aspetterei che il secondo div inizi a destra del primo div, ma come puoi vedere nel jsfiddle in basso, si estende ancora per l’intera larghezza.

Il contenuto d’altra parte inizia magicamente dove dovrebbe. La regola float fluttua solo il contenuto ma non i margini?

Esempio qui

EDIT: Mi aspetto che il codice sopra sia simile a questo, ma senza la necessità esplicita di utilizzare i margini.