A propiedade CSS clara formou parte de CSS desde CSS1. Permite especificar que elementos poden flotar ao carón do elemento despexado e en cal (s) lado (s). A propiedade clara ten cinco valores posibles:
- ninguén
- esquerda
- ben
- ambas
- herdar
Como usar a Propiedade clara de CSS
A forma máis común de usar a propiedade clara é despois de ter usado unha propiedade flotante nun elemento. Por exemplo:
Texto á beira da miña imaxe.
Texto que está debaixo da miña imaxe.
Todos os elementos predeterminados para borrar: ningún; , polo tanto, se non quere que outros elementos floten ao carón de algo, debes cambiar o estilo claro.
Cando estea a limpar os carrossos, combina o seu claro co seu flutuante. Entón, se flutuou o elemento á esquerda, debes quitar á esquerda. O elemento flutuado continuará flotando, pero o elemento borrado e todo despois de que apareza debaixo dela na páxina web.
Se ten elementos que están flotando cara á dereita e á esquerda, pode borrar só un lado ou pode borrar ambos.
Usando claro en Layouts
A forma máis común de que a maioría dos deseñadores utilice a propiedade clara está no deseño dos elementos da páxina . Podería ter unha imaxe flotante dentro dun bloque de texto e querer que o seguinte parágrafo comezase debaixo da imaxe, ou pode ter unha columna enteira de texto que quere flotar xunto a outro grupo de texto, con algún texto que aparece debaixo.
Aquí está o HTML para un deseño neste formulario.
Ten un recipiente div que ten outro que está flotando á esquerda.
Un breve div flotante
Contidos dentro do contedor div que estarán á dereita do div flotante.
Isto funcionará ben, coa div máis curta flotante á esquerda do resto dos contidos do div principal.
Pode borrar o texto ao lado da caixa flotante simplemente engadindo unha etiqueta onde queira que comece a escribir baixo a caixa flotante.
Pero o problema ocorre cando a caixa flotante é máis longa que os contidos ao seu carón. Entón, como podes ver, a cor de fondo da caixa principal non se move ata a parte inferior da caixa flotante.
Afortunadamente, hai unha forma fácil de corrixir isto: a propiedade. Ao configurar a caixa principal para sobreexugar: auto; a cor de fondo permanecerá á beira da caixa flotante máis longa, como se mostra neste exemplo .