Entrar

comportamiento raro de float y clear

isaacaaron · · Solicitar retirada
Hola alguien entiende este comportamiento extraños de los float y clear o es algo que no llego a pillar de estas propiedades, os explico :
Si copias el ejemplo que pongo a continuación veréis que el div uno aparace lo mas a la izquierda posible ya que tiene float left, el div dos aparece pegado a al div uno ya que tiene float left también y el div tres aparece lo mas a la derecha posible ya que tiene float right. Hasta qui todo bien. Si ahora jugamos un poco con el código y le ponemos al div dos un clear left el elemento se desplaza de forma descendente hasta que pueda colocarse en una línea en la que no ya haya ninguna caja flotante a la izquierda, es decir se pondrá debajo del div uno. Pero el problema que veo aquí es si en vez de ponerle un clear left le ponemos un clear right¿ porque no hace nada ese div dos y de desplaza también de forma descendente? probad.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
div#papa {
background-color:#0C9;
overflow:hidden;
width:700px;
}
div#uno {
background-color:#F00;
float:left;
}
div#dos {
background-color:#0F0;
float:left;
clear:left;/*prueba a poner right y no hace nada*/
}
div#tres {
background-color:#00F;
float:right;
}
</style>
</head>

<body>
<div id="papa">
<div id="uno">uno</div>
<div id="dos">dos</div>
<div id="tres">tres</div>
</div>
</body>
</html>

Si ahora cogemos el código original que os puse y en los css cambiamos al div dos float right y al div tres float left y ahora jugamos con este div tres y ponemos o clear left o clear right si vemos que se desplaza de forma decendente tanto al poner clear left o right. Probad
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
div#papa {
background-color:#0C9;
overflow:hidden;
width:700px;
}
div#uno {
background-color:#F00;
float:left;
}
div#dos {
background-color:#0F0;
float:right;

}
div#tres {
background-color:#00F;
float:right;
clear:left;/*prueba a poner right y ahora si de dezplaza tambien de forma decendente*/
}
</style>
</head>

<body>
<div id="papa">
<div id="uno">uno</div>
<div id="dos">dos</div>
<div id="tres">tres</div>
</div>
</body>
</html>
Con tanta explicación uno se puede perder, pero si copias los códigos y probais veréis claramente a los que me refiero con este tema. Gracias
skaparate · · Solicitar retirada
Hola!

Lo que pasa es que clear sólo afecta al elemento anterior, no a los que le siguen.

clear afecta a los elementos cuya propiedad float sea igual a la de clear. O sea, si un elemento anterior tiene la propiedad float: left y aplicas clear: left, lo afectará, mientras que si usas clear: right, no causará ningún cambio.

En tu ejemplo, el único elemento anterior a dos es el div uno que esta flotando a la izquierda.

Haz la prueba cambiando todos los float a la derecha y clear también.
isaacaaron · · Solicitar retirada
Es decir, en el ultimo ejemplo pongas lo que le pongas a clear el elemento se desplaza de forma descendente hasta que pueda colocarse en una línea en la que no ya haya ninguna caja flotante a la izquierda o a la derecha. Como tiene dos elementos anteriores en el código uno flotando a la izquierda y otro a la derecha pues en ese Div tres funciona tanto clear left o right. Prueba lo y me dices skaparate