HTML-CSS/caja-flotante.html at main · GersonRG23/HTML-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Caja Flotante</title>
	<style>
		section.info{
			background: red;
		}
		.caja{
			width: 120px;
			height: 100px;
			background: #DBD9D9;
			border: solid 1px;
		}
		.flotarDerecha{
			float: right;
		}
		.flotarIzquierda{
			float: left;
		}
		.restaurar{
			clear: both;
		}
	</style>
</head>
<body>
	<section class="info">
		<div class="caja flotarIzquierda"></div>
		<div class="caja flotarIzquierda"></div>
		<div class="caja flotarDerecha"></div>
		<div class="caja flotarDerecha"></div>
		<div class="restaurar"></div>
	</section>
</body>
</html>
<!--
float – Esta propiedad permite a un elemento flotar hacia un lado u otro, y ocupar el espacio disponible, incluso cuando tiene que compartir la línea con otro elemento. Los valores disponibles son none (el elemento no flota), left (el elemento flota hacia la izquierda) y right (el elemento flota hacia la derecha
clear – Esta propiedad restaura el flujo normal del documento, y no permite que el elemento siga flotando hacia la izquierda, la derecha o ambos lados. Los valores disponibles son none, left, right, y both (ambos).
-->