Propiedad clear

La propiedad clear cancela la fluencia de un elemento por otros, definida por la propiedad float. Puede tomar los siguientes valores: none (cancela su propia acción), both (cancela float simultáneamente a derecha e izquierda), left (cancela float a la izquierda), right (cancela float a la derecha).

Sintaxis

cssselector {
  clear: none o left o right o both
}

Ejemplo

Cancelemos la fluencia de la imagen por el texto a la izquierda:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    text text text text text text
    text text text text text text
    text text text text text text
    text text text text text text
  </p>
</div>

css.image {
  float: left;
  padding-right: 10px;
}
.txt {
  clear: left;
}

Результат:

Ejemplo

Ahora cancelemos la fluencia de la imagen por el texto a la derecha:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    text text text text text text
    text text text text text text
    text text text text text text
    text text text text text text
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: right;
}

Результат:

Ejemplo

Cancelemos la acción de la propia propiedad clear:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    text text text text text text
    text text text text text text
    text text text text text text
    text text text text text text
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: none;
}

Результат:

Véase también