B. `float` 2

Salida


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Float 2</title>
8	<meta name="viewport"
9	content="width=device-width">
10
11	<style>
12	main {
13	display: flow-root;
14	}
15
16	aside {
17	border: solid;
18	}
19
20	.floatLeft {
21	float: left
22	}
23
24	.floatRight {
25	float: right
26	}
27	</style>
28
29	</head>
30
31	<body>
32
33	<h1>Float 2</h1>
34
35	<main>
36
37	<aside class="floatLeft">
38	<p>Flota a la izquierda.</p>
39	</aside>
40
41	<aside class="floatRight">
42	<p>Flota a la derecha.</p>
43	</aside>
44
45	<p>
46	Este es otro ejemplo de float.
47	</p>
48	<p>
49	La propiedad display: flow-root
50	evita el flotado fuera del
51	elemento.
52	</p>
53	<p>
54	Puedes poner varios float hacia
55	donde quieras; inclusive hacia
56	el mismo lado.
57	</p>
58
59	<aside class="floatRight">
60	<p>Flota a la derecha.</p>
61	</aside>
62
63	</main>
64
65	<footer>
66	<p>
67	© 2025
68	Gilberto Pacheco Gallegos
69	</p>
70	</footer>
71
72	</body>
73
74	</html>