![\"Sin](\"http:\/\/irisfernandez.com.ar\/betaweblog\/wp-content\/uploads\/2009\/05\/sin-float-ni-clear.jpg\")
<\/p>\n
<div id=”izquierda”>
\n<p>Ingredientes<\/p>
\n<ul><li>Tapa para pascualina<\/li>
\n…
\n<\/div><\/p>\n
<div id=”contenido”>
\n<h1>Tarta de Jam\u00f3n y queso<\/h1>
\n<p>Encender el horno<\/p>
\n…<\/p>\n
<\/div><\/p>\n
<\/p>\n
Bajar el c\u00f3digo del ejemplo<\/a><\/p>\n Para que el ejemplo se vea m\u00e1s claramente, al segundo div se le determin\u00f3 un ancho fijo<\/span> (usando la unidad de medida em):<\/p>\n width: 25em;<\/p>\n Empecemos por agregar a cada uno de los dos DIVs la propiedad Float: left<\/span>. Con esto le estamos diciendo que se pegue al elemento que est\u00e9 a la izquierda, ocupando el espacio libre que este elemento dej\u00f3 a su derecha. Por lo tanto, si a los dos DIVs les ponemos como propiedad float: left<\/span>, el resultado ser\u00e1 que el primero que aparezca en el c\u00f3digo HTML se pegar\u00e1 sobre el borde izquierdo de la pantalla, y el segundo se pegar\u00e1 sobre el primero:<\/p>\n #izquierda #contenido Para que quede m\u00e1s claro, voy a invertir el orden de los divs en el archivo HTML<\/strong>, poniendo primero el c\u00f3digo de la receta y despu\u00e9s el de los ingredientes. El resultado, con ambos divs flotando a la izquierda, es este:<\/p>\n <div id=”contenido”> … <\/div> Ahora vamos a cambiar la propiedad float del div que contiene la receta. Le diremos que flote a la derecha (float: right<\/span>), es decir, que se pegue al elemento que encuentre a su derecha (el borde de la p\u00e1gina o alg\u00fan otro div que est\u00e9 flotando a la derecha). Como tenemos un div que flota a la izquierda y otro que flota a la derecha, el resultado ser\u00e1 este:<\/p>\n En algunos casos vamos a necesitar que un DIV no contenga ning\u00fan elemento flotante a su izquierda o a su derecha. En ese caso lo que tendremos que utilizar es la propiedad Clear<\/span> (despejar<\/span>), cuyos valores son: none, left, right, <\/span>both (ninguno, izquierda, derecha, ambos). <\/em><\/p>\n M\u00e1s ejemplos:<\/p>\n Elementos flotantes (html.net)<\/a><\/p>\n Las propiedades ‘left’ y ‘clear’ (sidar)<\/a><\/p>\n Otros posts de BETA Weblog<\/em> sobre accesibilidad y CSS:<\/p>\n \u00bfC\u00f3mo se ve mi sitio en otros sistemas?<\/a><\/p>\n Im\u00e1genes en CSS<\/a><\/p>\n Sombras nada m\u00e1s… o \u00bfsombras en el texto de una web accesible?<\/a><\/p>\n Ayuda para crear hojas de estilo<\/a><\/p>\n C\u00f3mo saber el c\u00f3digo de un color<\/a><\/p>\n C\u00f3mo saber si tu sitio es accesible<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" Cuando reci\u00e9n empezamos a crear p\u00e1ginas web usando hojas de estilo nos cuesta entender de qu\u00e9 manera acomodar los diferentes DIVs en la pantalla. Aqu\u00ed cre\u00e9 una p\u00e1gina de ejemplo que tiene dos divs, todav\u00eda sin float ni clear: <div id=”izquierda”> <p>Ingredientes<\/p> <ul><li>Tapa para pascualina<\/li> … <\/div> <div id=”contenido”> <h1>Tarta de Jam\u00f3n y queso<\/h1> <p>Encender … Continuar leyendo “M\u00e1s sobre estilos CSS: Float y clear”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-589","post","type-post","status-publish","format-standard","hentry","category-educacion-tecnologia"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=589"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/589\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Float:](\"http:\/\/irisfernandez.com.ar\/betaweblog\/wp-content\/uploads\/2009\/05\/float-left.jpg\")
<\/p>\n
\n{
\n…
\nfloat: left;
\n}<\/p>\n
\n{
\n…
\nwidth: 25em;
\nfloat: left;
\n}<\/p>\n
\n<div id=”izquierda”>…<\/div><\/p>\n![\"Ambos](\"http:\/\/betaweblog.education\/wp\/wp-content\/uploads\/2009\/05\/float-left-invertidos.jpg\")
<\/p>\n![\"Float:](\"http:\/\/irisfernandez.com.ar\/betaweblog\/wp-content\/uploads\/2009\/05\/float-right.jpg\")
<\/p>\n![\"Clear:](\"http:\/\/betaweblog.education\/wp\/wp-content\/uploads\/2009\/05\/clear-left.jpg\")
<\/p>\n