diff options
Diffstat (limited to 'files/es/web/css/float/index.html')
| -rw-r--r-- | files/es/web/css/float/index.html | 241 |
1 files changed, 241 insertions, 0 deletions
diff --git a/files/es/web/css/float/index.html b/files/es/web/css/float/index.html new file mode 100644 index 0000000000..26077edca5 --- /dev/null +++ b/files/es/web/css/float/index.html @@ -0,0 +1,241 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - CSS Float + - CSS Posicionamiento + - CSS Propiedad + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/float +--- +<p>{{CSSRef}}</p> + +<p>La propiedad CSS <code>float</code> ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en línea aparecer a su costado. El elemento es removido del normal flujo de la página, aunque aún sigue siendo parte del flujo (a diferencia del <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning">posicionamiento absoluto</a>).</p> + +<p>{{EmbedInteractiveExample("pages/css/float.html")}}</p> + +<div class="hidden"> +<p>La fuente de este ejemplo interactivo está almacenada en un repositorio de GitHub. Si deseas contribuír a los ejemplos interactivos del proyecto, por favor clonar <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y enviarnos una solicitud de extracción -pull request-.</p> +</div> + +<p>Un elemento <strong>flotante</strong> es un elemento en el que el {{ Cssxref("computed value", "valor calculado") }} de <code>float</code> <em>no</em> es igual a <code>none</code>.</p> + +<p>Como <code>float</code> implica el uso del layout de bloques, este modifica el valor calculado de los valores {{cssxref("display")}} , en algunos casos:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><strong>Valor especificado</strong></th> + <th scope="col"><strong>Valor Computado</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>inline</td> + <td>block</td> + </tr> + <tr> + <td>inline-block</td> + <td>block</td> + </tr> + <tr> + <td>inline-table</td> + <td>table</td> + </tr> + <tr> + <td>table-row</td> + <td>block</td> + </tr> + <tr> + <td>table-row-group</td> + <td>block</td> + </tr> + <tr> + <td>table-column</td> + <td>block</td> + </tr> + <tr> + <td>table-column-group</td> + <td>block</td> + </tr> + <tr> + <td>table-cell</td> + <td>block</td> + </tr> + <tr> + <td>table-caption</td> + <td>block</td> + </tr> + <tr> + <td>table-header-group</td> + <td>block</td> + </tr> + <tr> + <td>table-footer-group</td> + <td>block</td> + </tr> + <tr> + <td>inline-flex</td> + <td>flex</td> + </tr> + <tr> + <td>inline-grid</td> + <td>grid</td> + </tr> + <tr> + <td>otros</td> + <td>sin cambios</td> + </tr> + </tbody> +</table> + +<p>Nota: Al referirse a una propiedad desde JavaScript como un miembro del objeto <a href="/es/DOM/element#element.style" title="es/DOM/element#element.style">element.style</a>, hay que tener en cuenta que los navegadores modernos soportan <code>float</code> pero en navegadores más antiguos hay que escribir la propiedad como <code>cssFloat</code>, otros navegadores como Internet Explorer 8 y anteriores utilizan <code>styleFloat</code>. Fue una excepción a la regla, que el nombre del miembro DOM sea el nombre <em>camel-case</em> (styleFloat) del nombre CSS (style-float) separado por guión (debido al hecho que "float" es una palabra reservada en JavaScript, es necesario escapar "class" como "className" y escapar "for" de la etiqueta como "htmlFor" ).</p> + +<h2 id="Sintáxis">Sintáxis</h2> + +<pre class="notranslate">/* Valores clave || Keyword values */ +float: left; +float: right; +float: none; +float: inline-start; +float: inline-end; + +/* Valores globales || Global values */ +float: inherit; +float: initial; +float: unset;</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<p><code><strong>left</strong> </code></p> + +<p>El elemento debe flotar a la izquierda de su bloque contenedor.</p> + +<p><code><strong>right</strong> </code></p> + +<p>El elemento debe flotar a la derecha de su bloque contenedor.</p> + +<p><code><strong>none</strong> </code></p> + +<p>El elemento no deberá flotar.</p> + +<p><strong><code>inline-start</code></strong></p> + +<p>El elemento debe flotar en el costado de inicio de su bloque contenedor. Esto es el lado izquierdo con scripts <code>ltr</code> y el lado derecho con scripts <code>rtl</code>.</p> + +<dl> + <dt><code>inline-end</code></dt> + <dd>El elemento debe flotar en el costado de término de su bloque contenedor . Esto es el lado derecho con scripts <code>ltr</code> y el lado izquierdo con scripts <code>rtl</code>.</dd> +</dl> + +<h2 id="Definición_Formal">Definición Formal</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Sintáxis_Formal">Sintáxis Formal</h2> + +<dl> + <dt> + <pre class="notranslate">{{csssyntax}} +</pre> + </dt> +</dl> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Como_son_ubicados_los_elements_flotantes">Como son ubicados los elements flotantes </h3> + +<p><a href="/samples/cssref/float.html">Ver El Ejemplo Vivo</a></p> + +<p>Como se ha mencionado más arriba, cuando un elemento flota, es removido del flujo normal del documento (aunque sigue perteneciendo a él). Se cambia hacia la izquierda, o hacia la derecha, hasta que toca el límite de su caja contenedora, u <em>otro elemento flotante.</em></p> + +<p>En este ejemplo, hay tres cuadrados de color. Dos flotan hacia la izquierda, y uno hacia la derecha. Nota cómo el segundo cuadrado de la izquierda se coloca a la derecha del primero. Si agregamos cuadrados adicionales se continuarían apilando hacia la derecha, hasta que hayan llenado la caja contenedora, y luego rellenarían la siguiente línea.</p> + +<p>Un elemento flotante es al menos tan alto como su elemento hijo flotante más alto. En el ejemplo se le da al elemento padre <code>width: 100% </code>y la propiedad de flotante para asegurar que es lo suficientemente alto para encajar con sus hijos flotantes, y asegurar que ocupa el ancho -width- del padre de modo de no tener que limpiar su pariente adyacente.</p> + +<p><strong>HTML</strong></p> + +<pre class="notranslate"><section> + <div class="left">1</div> + <div class="left">2</div> + <div class="right">3</div> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Morbi tristique sapien ac erat tincidunt, sit amet dignissim + lectus vulputate. Donec id iaculis velit. Aliquam vel + malesuada erat. Praesent non magna ac massa aliquet tincidunt + vel in massa. Phasellus feugiat est vel leo finibus congue.</p> +</section></pre> + +<p><strong>CSS</strong></p> + +<pre class="notranslate">section { + border: 1px solid blue; + width: 100%; + float: left; +} + +div { + margin: 5px; + width: 50px; + height: 150px; +} + +.left { + float: left; + background: pink; +} + +.right { + float: right; + background: cyan; +}</pre> + +<p><strong>RESULTADO:</strong></p> + +<p>{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}</p> + +<h3 id="Notas" name="Notas">Limpiando (clearing) flotantes:</h3> + +<p>A veces querrás forzar un item a moverse por debajo de elementos flotantes. Por ejemplo, párrafos que han de permanecer adyacentes a elementos flotantes, pero forzar a los encabezados a estar en su propia línea. Para ello revisa el siguiente ejemplo: {{cssxref("clear")}}</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#float">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float">CSS 2.1</a></li> +</ul> + +<h3 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}</p> + +<div class="noinclude"> +<p><span class="comment">Categorías</span></p> + +<p><span class="comment">Interwiki Language</span></p> +</div> |