[SOLUCIONADO] Ejercicio que no entiendo de librosweb

Iballa · #1 (**permalink**) 15/06/2013, 11:22

Hola, estoy haciendo los ejercicios de la página librosweb.es, de los capítulos CSS, y estoy por el ejercicio 6 que describe el comportamiento del float. No lo entiendo.

....

-siendo <span> dos elementos en linea, que flotan uno al lado del otro por defecto, ¿por qué hay que darle un float, encima a los dos, para que se vea como el resultado de la página? Pero....si ya están uno a la derecha y otro a la izquierda¡¡¡

-no habiendo más elementos después del span, ¿por qué poner otro div para limpiar el float?

el ejercicio es este:http://librosweb.es/css/capitulo_15/ejercicio_6.html

Gracias

pzin · #2 (**permalink**) 15/06/2013, 12:03

Elementos en linea no es igual a elementos que flotan. Por lo que esta afirmación:

Cita:

siendo <span> dos elementos en linea, que flotan uno al lado del otro por defecto

es errónea.

Y no están por defecto uno a la izquierda y otro a la derecha. Están uno al lado del otro.

Para lo de limpiar el float tendrás que poner algo de código.

Lo de limpiar el flotado, se hace para que el elemento padre tome la altura de sus hijos, ya que al estar flotados, no hacen al padre crecer en altura.

Hay otra técnica para solución eso, que es añadir al elemento padre un overflow con un valor de auto o hidden. También existe otra solución llamada Micro Clearfix. Esta última suele ser la más recomendable porque la del overflow a veces puede crear otros problemas.

comablck · #3 (**permalink**) 15/06/2013, 12:07

otra forma de limpiar el float sin usar codigo extra, al div q contiene los tag con float, agregarle un overflow:hidden

pzin · #4 (**permalink**) 15/06/2013, 12:11

Cita:

Iniciado por comablck

otra forma de limpiar el float sin usar codigo extra, al div q contiene los tag con float, agregarle un overflow:hidden

En realidad no se limpia el flotado con overflow, sólo se fuerza al padre a tomar la altura de sus hijos.

Iballa · #5 (**permalink**) 15/06/2013, 14:12

Para no perderme en definiciones que esten bien o mal, mi duda es más bien, ¿por qué si ya están uno al lado del otro, ya que span es un elemento en linea, hay que hacerlos flotar para obtener el mismo resultado, según dice el ejercicio...

para los que les de pereza ir al enlace lo pongo. El ejercicio dice:

A partir del código HTML proporcionado:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Ejercicio posicionamiento float</title>
  <style type="text/css">
  </style>
</head>
 
<body>
  <div>
    &laquo; Anterior &nbsp; Siguiente &raquo;
  </div>
</body>
</html>

Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en la siguiente imagen:

y la solución que da al ejercicio es esta:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio posicionamiento float</title>
<style type="text/css">
div#paginacion {
  border: 1px solid #CCC;
  background-color: #E0E0E0;
  padding: .5em;
}
.derecha {
  float: right;
}
.izquierda {
  float: left;
}
div.clear {
  clear: both;
}
</style>
</head>
 
<body>
<div id="paginacion">
<span class="izquierda">&laquo; Anterior</span> <span class="derecha">Siguiente &raquo;</span>
<div class="clear"></div>
</div>
</body>
</html>

repito, ¿para que tanto rollo si ya estan uno al lado del otro, un poco mas lejos eso si...pero al fin y al cabo uno al lado del otro?

pd: no me maten por pregunta tonta

pzin · #6 (**permalink**) 15/06/2013, 14:50

Pues obviamente para que uno esté a la derecha del todo y otro a la izquierda. No es un poco más lejos. Si el contenedor midiera 5000 pixeles verías que no es sólo un poco.

Hay más formas de conseguir el mismo efecto, pero todas pasan por cambiarle el display: inline —cuando flotas un elemento, se convierte implícitamente en un elemento de bloque.

Por ejemplo, podrías poner que los span midieran 50% cada uno, ¿no? Así cubriría cada uno la mitad y por extensión uno estaría a la izquierda del todo y otro a la derecha. Pero no pasaría eso, porque a elementos en linea no les puedes aplicar un ancho. Ejemplo: http://jsbin.com/oziheh/1/edit

Y no te olvides que son ejercicios para aprender el comportamiento y mostrarte situaciones de distinta índole.

Iballa · #7 (**permalink**) 17/06/2013, 05:41

Gracias pzin, ahora lo entiendo. El float right hace que se pege el elemento al extremo más de la derecha de la caja padre. Entonces el float left estaria de más no?

Por otro lado, el elemento padre pierde altura, al salirse sus hijos del flujo normal..

.y la otra caja adicional que ponen, hija tambien del contenedor padre, al darle clear hace que esa caja padre pille altura?...

pzin · #8 (**permalink**) 17/06/2013, 05:49

Todo correcto Iballa.

Poco más que decir.