He querido aplicar un borde inferior (a modo de subrayado) para un encabezad. Para que el "subrayado" ocupara solo el ancho del texto se me ha ocurrido convertir la etiquita en inline (no se si hay otra manera desde CSS). 

El problema es que intento centrar este encabezado con margin:0 auto y no se centra. Pq?

Ademas no entiendo porque al aplicar un float al parrafo este se sube hasta la altura del encabezado, ya que pensaba que el float se genera desde la etiqueta en la que se aplica hacia abajo (he indicado el borde rojo para que se vea mas claro su borde superior).

    <!DOCTYPE html>
    <html lang="en"> <!--Se elige "en" para construir la pagina en ingles-->
    <head>
			
    <title>Uso de la propiedad display</title>

    <style>
    html{background-color:blue;}

    body{width:60%;
    background-color:gray;

    margin:0 auto;
    padding:30px;}

    h1{border-bottom:3px dashed black;
					
    display:inline;
					
    margin:0px auto
    font-size:2rem;}

    p{ font-size:2rem;
    width:50%;
    float:right;
    border:1px solid red;}

    img{border:10px solid black;
    margin-top:20px;}
    </style>
    </head>

    <body>

    <h1>Rio: Curso de agua</h1>

    <p>Un río o flujo de agua es una corriente natural de agua que fluye con continuidad por un cauce en la superficie terrestre. Posee un caudal determinado, rara vez es constante a lo largo del año, y desemboca en el mar, en un lago o en otro río, en cuyo caso se denomina afluente.</p>
		
    <img src="rioAmazonas.jpg" title="Rio Amazonas" width="40%">
			
    </body>
    </html>

Un saludo