¿Porqué me ocurre esto?

[ryugen]

Tu problema es el clasico problema de floats de CSS, cuando dispones de elementos flotantes dentro de una caja, esta deja de utilizar los elementos que flotan para calcular la altura, por lo tanto al flotar ambos elementos la caja desaparece ya que no contiene elementos.
Hay varios fix para este problema, como agregar debajo de tus elementos un div con la propiedad CSS "clear:both;":

Código CSS:

.clearfix { clear:both;}
 

Código HTML:

<section id="about_me" class="cf">
            <img src="images/oscar-prat.jpg" alt="oscar-prat" width="250" height="327">
            <article>
            
            </article>
                         <div class="clearfix"></div>
        </section>
 

Sin embargo la tecnica que yo utilizo es la siguiente, aplico la siguiente clase CSS al elemento padre contenedor, en tu caso la section con id "about-me"

Código CSS:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}
 

Entonces quedaria algo asi:

Código HTML:

<section id="about_me" class="cf">
            <img src="images/oscar-prat.jpg" alt="oscar-prat" width="250" height="327">
            <article>
            
            </article>
        </section>
 

La primera tecnica introduce marcado innecesario y no semántico.

Por otro lado la segunda técnica introduce CSS no valido (en el hack para IE 6 y 7), pero como solución puede ofrecerse ese estilo en una hoja de estilo proporcionada solo para aquellos navegadores