La propietat CSS clara ha format part de CSS des de CSS1. Permet especificar quins elements poden flotar al costat de l'element desglossat i en quin (s) lateral (s). La propietat clara té cinc valors possibles:
- cap
- esquerra
- dret
- tots dos
- heretar
Com s'utilitza la propietat CSS Clear
La manera més habitual d'utilitzar la propietat clara és després d'haver utilitzat una propietat flotant en un element. Per exemple:
Text al costat de la meva imatge.
Text que està per sota de la meva imatge.
Tots els elements predeterminats per esborrar: cap; , de manera que si no voleu que floteu altres elements al costat d'alguna cosa, heu de canviar l'estil clar.
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 bé esborrar-ne tots dos.
Ús clar a Dissenys
La forma més comú que la majoria dels dissenyadors utilitza la propietat clara és 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 configurar el quadre principal per desbordar: 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 .