Skip to main content

Comprensió de la propietat CSS Clear

Anonim

El clar La propietat CSS ha estat part de CSS des de CSS1. Permet especificar quins elements poden flotar al costat de l'element desglossat i en quin (s) lateral (s). El clar la propietat té cinc valors possibles:

  • cap
  • esquerra
  • dret
  • tots dos
  • heretar

Com s'utilitza la propietat CSS Clear

La forma més comuna d'utilitzar el clar La propietat és després d'haver utilitzat un surar propietat d'un element. Per exemple:

  • Text al costat de la meva imatge.
  • Text que està per sota de la meva imatge.

Tots els elements per defecte clar: cap;, de manera que si no voleu que floteu altres elements al costat d'alguna cosa, heu de canviar-ne el clar estil.

Quan estigueu netejant carrosses, coincideix amb el vostre clar amb el vostre flotador. D'aquesta manera, si heu flotat l'element a l'esquerra, haureu d'esborrar a l'esquerra. El vostre element flotant continuarà flotant, però l'element net i tot després que aparegui a sota de la pàgina web.

Si teniu elements que flotant tant a la dreta com a l'esquerra, podeu esborrar només un costat o podeu esborrar-ne tots dos.

Ús clar a Dissenys

La forma més comú la majoria dels dissenyadors utilitzen clar La propietat està en el disseny dels elements de la pàgina. Podeu tenir una imatge flotant dins d'un bloc de text i voleu que el següent paràgraf comenci per sota de la imatge o que tingui una columna de text completa que voleu flotar al costat d'un altre grup de text, amb algun text que apareix a continuació.

Aquí teniu l'HTML per a un disseny en aquest formulari. Té un contenidor div que conté un altre que flota cap a l'esquerra.

Una breu divisió flotant

Continguts dins del contenidor div que estaran a la dreta del div flotant.

Això funcionarà bé, amb el div més curt flotant a l'esquerra de la resta dels continguts del div principal.

Podeu netejar el text al costat del quadre flotant simplement afegint una etiqueta on voleu que comenci a escriure sota el quadre flotant.

Però el problema arriba quan la caixa flotant és més llarga que els continguts que hi ha al costat. A continuació, com podeu veure, el color de fons de la caixa principal no es porta cap a la part inferior de la caixa flotant.

Afortunadament, hi ha una manera fàcil d'arreglar-ho: la propietat. En establir el quadre principal a desbordament: automàtic; el color de fons romandrà al costat de la caixa més flotant més a la part inferior, com es mostra en aquest exemple.