initial commit

1 files changed, 239 insertions, 0 deletions

diff --git a/files/es/web/css/clear/index.html b/files/es/web/css/clear/index.html
new file mode 100644
index 0000000000..e66c285536
--- /dev/null
+++ b/files/es/web/css/clear/index.html
@@ -0,0 +1,239 @@
+---
+title: clear
+slug: Web/CSS/clear
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/clear
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <a href="/es/docs/CSS">CSS</a> <strong><code>clear </code></strong>especifica si un elemento puede estar al lado de elementos <a href="/es/docs/CSS/float">flotantes</a> que lo preceden o si debe ser movido (cleared) debajo de ellos. La propiedad <code>clear</code> aplica a ambos elementos flotantes y no flotantes.</p>
+
+<p>Cuando es aplicado a bloques no flotantes, mueve el <a href="/es/docs/CSS/box_model">border edge</a> del elemento hacia abajo hasta que este debajo del <a href="/es/docs/CSS/box_model">margin edge</a> de todos los floats relevantes. Este movimiento (cuando acontece) causa que <a href="/es/docs/CSS/margin_collapsing">margin collapsing</a> no ocurra.</p>
+
+<p>Cuando se aplica a elementos flotantes, mueve el <a href="/es/docs/CSS/box_model">margin edge</a> del elemento debajo del <a href="/es/docs/CSS/box_model">margin edge</a> de todos los floats relevantes. Esto afecta la posición de floats posteriores, ya que estos no pueden ser posicionados más arriba que los primeros.</p>
+
+<p>Los floats que son relevantes para ser limpiados (cleared) son los primeros floats dentro del mismo <a href="/es/docs/Web/Guide/CSS/Block_formatting_context">contexto de formato de bloque</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Si deseas que un elemento contenga todos los elementos flotantes dentro, puedes hacer dos cosas, o bien flotar el contenedor también o usar <code>clear</code> en un <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-element</a> {{cssxref("::after")}}.</p>
+
+<pre class="brush: css notranslate">#container::after {
+   content: "";
+   display: block;
+   clear: both;
+}
+</pre>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css notranslate">clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+clear: inherit;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Es un keyword que indica que el elemento no es movido hacia abajo para limpiar elementos flotantes anteriores.</dd>
+ <dt><code>left</code></dt>
+ <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes a la izquierda.</dd>
+ <dt><code>right</code></dt>
+ <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes a la derecha.</dd>
+ <dt><code>both</code></dt>
+ <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar tanto elementos flotantes de la izquierda como de la derecha.</dd>
+ <dt><code>inline-start</code> {{experimental_inline}}</dt>
+ <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes al inicio del bloque contenedor, estos son los elementos con valor float <em>left</em> en scripts ltr (left to right) y elementos con valor float <em>right</em> en scripts rtl (right to left).</dd>
+ <dt><code>inline-end</code> {{experimental_inline}}</dt>
+ <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar floats al final del bloque contenedor, estos son los elementos con valor float <em>right</em> en scripts ltr (left to right) y elementos con valor float <em>left</em>  en scripts rtl (right to left).</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<div class="note"><strong>Nota: </strong>El div con clase 'wrapper' añade un borde para una mejor visibilidad de la utilidad de la propiedad clear</div>
+
+<h3 id="clear_left">clear: left</h3>
+
+<h4 id="Contenido_HTML">Contenido HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+
+    &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+
+    &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+
+    &lt;p class="left"&gt;This paragraph clears left.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<h4 id="Contenido_CSS">Contenido CSS</h4>
+
+<pre class="brush: css notranslate">.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.left {
+    border: 1px solid black;
+    clear: left;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width: 20%;
+}
+.red {
+    float: left;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('clear:_left','100%','250') }}</p>
+
+<h3 id="clear_right">clear: right</h3>
+
+<h4 id="Contenido_HTML_2">Contenido HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+
+    &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+
+    &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+
+    &lt;p class="right"&gt;This paragraph clears right.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<h4 id="Contenido_CSS_2">Contenido CSS</h4>
+
+<pre class="brush: css notranslate">.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.right {
+    border: 1px solid black;
+    clear: right;
+}
+.black {
+    float: right;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}</pre>
+
+<p>{{ EmbedLiveSample('clear:_right','100%','250') }}</p>
+
+<h3 id="clear_both">clear: both</h3>
+
+<h4 id="Contenido_HTML_3">Contenido HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+
+    &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
+
+    &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+
+    &lt;p class="both"&gt;This paragraph clears both.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<h4 id="Contenido_CSS_3">Contenido CSS</h4>
+
+<pre class="brush: css notranslate">.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.both {
+    border: 1px solid black;
+    clear: both;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 45%;
+}</pre>
+
+<p>{{ EmbedLiveSample('clear:_both','100%','300') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Agrega los valores inline-start y inline-end</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Sin cambios significativos, aunque se aclaran los detalles.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+<p>{{Compat("css.properties.clear")}}</p>
+
+<h2 id="También_puedes_ver">También puedes ver</h2>
+
+<ul>
+ <li><a href="/es/docs/Escuela_XUL/El_modelo_de_caja">El modelo de caja</a></li>
+</ul>