DIV con posicionamiento flotante

La potencialidad de esta opción, es que desplaza este elemento todo lo que pueda a la dirección indicada, hasta encontrar el límite del elemento contenedor, u otro elemento también flotante, además hace que todos los elementos fluyan a su alrededor.

Crearemos un archivo HTML con dos elementos div con posición flotante a la izquierda y a la derecha, como vemos en la siguiente imagen:

Realizaremos los siguientes pasos:

1.- Crearemos un archivo HTML en blanco.

2.- Presionaremos la siguiente opción para insertar un DIV:

3.- Ingresar en siguiente nombre de ID y presionar el botón "Nueva regla CSS":

4.- Presionar el botón "Aceptar":

5.- Visualizaremos el cuadro de edición de regla CSS, en la la opción tipo definiremos fuente color blanco.

6.- En la la opción Fondo definiremos el color negro.

7.- En la opción Cuadro ingresaremos el ancho, alto y float left:

8.- Presionaremos el botón "Aceptar":

9.- Presionaremos el botón "Aceptar":

10.- Presionaremos la siguiente opción para insertar un DIV:

11.- Ingresar en siguiente nombre de ID y presionar el botón "Nueva regla CSS":

12.- Presionar el botón "Aceptar":

13.- Visualizaremos el cuadro de edición de regla CSS, en la la opción tipo definiremos fuente color blanco.

14.- En la la opción Fondo definiremos el color rojo.

15.- En la opción Cuadro ingresaremos el ancho, alto y float left:

16.- Presionaremos el botón "Aceptar":

17.- Presionaremos el botón "Aceptar":

18.- Presionaremos F12 y visualizaremos el siguiente resultado:

Ver Ejemplo