Propriedades do CSS flutuam, claras e transbordando | Explicado
Além disso, durante o desenvolvimento do site, geralmente encontramos determinadas circunstâncias em que o conteúdo presente em certos elementos HTML transbordam. Para lidar com essas situações, o CSS também fornece certas propriedades.
Neste guia, você passará pelas seguintes propriedades CSS.
- Propriedade flutuante
- Propriedade clara
- Propriedade de transbordamento
Vamos começar.
Propriedade flutuante
A propriedade Float é chamada de propriedade de posicionamento que é usada no posicionamento do conteúdo e estruturação do layout de um site. Esta propriedade posiciona um elemento de tal maneira que outros elementos envolvem.
Sintaxe
flutuação: valor;Como outras propriedades do CSS, a propriedade Float renderiza certos valores que estão listados abaixo.
| Valor | Descrição |
|---|---|
| nenhum | Este é um valor padrão que impede que um elemento flutue e exibe o elemento onde ele existe no texto. |
| esquerda | Para flutuar um elemento à esquerda, este valor é usado. |
| certo | Para flutuar um elemento à direita, esse valor é usado. |
| inicial | Para atribuir o valor original à propriedade, este valor é usado. |
| herdar | Para herdar esta propriedade de sua propriedade pai, este valor é usado. |
Aqui estão alguns exemplos da propriedade Float.
Exemplo 1
Suponha que você esteja exibindo algum texto em seu site e deseja adicionar uma imagem relevante ao lado direito do texto. Use o seguinte snippet de código.
Html
Cães são criaturas extremamente leais. Eles são fofos, brincalhões e são o melhor amigo de um homem. Existem várias raças de cães. Algumas das raças de cães são bull cão, husky siberiano, golden retriever e muitos mais.
CSS
imgFloat: Certo;
Largura: 190px;
Altura: 170px;
No exemplo acima, escrevemos algum texto em cães e flutuamos a imagem do cachorro para o lado direito. Aqui está a saída.
Imagem do cachorro flutuou à direita com sucesso.
Se no mesmo exemplo, a propriedade Float for definida como "Nenhum" em vez de "Right", então a imagem do cachorro será exibida onde ocorre no texto. Aqui está como vai ficar.
Exemplo 2
Às vezes, para adicionar beleza ao texto que aparece no site, você usa diferentes famílias de fontes e tamanhos. Além disso, flutuando o texto para uma posição apropriada também é muito importante. Este exemplo mostra como flutuar uma carta em um parágrafo.
Html
DOGs são criaturas extremamente leais. Eles são fofos, brincalhões e são o melhor amigo de um homem. Existem múltiplos
raças de cães. Algumas das raças de cães são bull cão, husky siberiano, golden retriever e muitos mais. Se você estiver passando
Depressão ou uma certa fase ruim da vida, acariciar um cachorro é altamente sugerido. Além desses cães também são usados para segurança
propósitos.
CSS
períodoflutuar: esquerda;
Largura: 0.8em;
altura da linha: 90%;
Size da fonte: 60px;
intensidade da fonte: Negrito;
Fonte-família: Times New Roman;
No exemplo acima, estamos flutuando a primeira letra do texto à esquerda e dando um certo estilo. A saída é mostrada abaixo.
A primeira letra flutuou à esquerda com sucesso.
Agora que entendemos a propriedade CSS Float, vamos aprender sobre a propriedade CSS CLEAR.
Propriedade clara
A propriedade clara também é uma propriedade de posicionamento que lida com os elementos próximos aos elementos que são flutuados.
Se você atribuir uma propriedade clara a um elemento na mesma direção que o flutuador, ela será empurrada abaixo dos elementos flutuados, caso contrário, se houver espaço suficiente, o elemento caberá ao lado do elemento flutuado horizontalmente.
Sintaxe
claro: valor;A propriedade clara exibe alguns valores que são explicados abaixo.
| Valor | Descrição |
|---|---|
| nenhum | Este é um valor padrão que impede a limpeza de elementos flutuados. |
| esquerda | Este valor posiciona os elementos para a esquerda dos elementos flutuados. |
| certo | Este valor posiciona os elementos à direita dos elementos flutuados. |
| ambos | Este valor posiciona os elementos à esquerda e à direita dos elementos flutuados. |
| inicial | Este valor atribui à propriedade seu valor original. |
| herdar | Para herdar esta propriedade de sua propriedade pai, este valor é usado. |
Vamos explorar ainda mais a propriedade clara com a ajuda de exemplos adequados.
Exemplo 1
Aprenderemos como a propriedade clara funciona usando o exemplo de cachorro mencionado na seção acima.
Html
Cães são criaturas extremamente leais. Eles são fofos, brincalhões e são o melhor amigo de um homem. Existem várias raças de cães. Algumas das raças de cães são bull cão, husky siberiano, golden retriever e muitos mais.
CSS
imgflutuar: esquerda;
Largura: 170px;
Altura: 170px;
Agora, no exemplo acima, existem dois elementos que são
e . No entanto, apenas está sendo flutuado para a esquerda. Agora, para entender como a propriedade clara funciona, aplicaremos claro ao
elemento. Use o seguinte snippet de código.
p.claroclaro: esquerda;
Aqui nos aplicamos clara ao
na mesma direção que o flutuador.
Saída
Antes de aplicar claro.
Depois de aplicar claro.
O texto foi limpo à esquerda da imagem flutuada.
Você pode usar outros valores da propriedade clara usando o exemplo acima para ver como eles funcionam.
Propriedade de transbordamento
A propriedade Overflow controla o comportamento do conteúdo que transborda a área especificada de um elemento, além disso, a propriedade Overflow foi projetada para elementos em nível de bloco apenas.
Sintaxe
estouro: valor;Diferentes valores da propriedade Overflow são fornecidos abaixo:
| Valor | Descrição |
|---|---|
| visível | Este é um valor padrão e exibirá todo o conteúdo que excede a área especificada do elemento. |
| escondido | Este valor oculta todo o conteúdo que está excedendo a área especificada do elemento. |
| rolagem | Este valor oculta o conteúdo que excede a área do elemento e fornece barras de rolagem vertical e horizontal para visualizar o conteúdo. |
| auto | Este valor adiciona uma barra de rolagem somente quando necessário. |
| inicial | Este valor atribui à propriedade seu valor original. |
| herdar | Para herdar esta propriedade de sua propriedade pai, este valor é usado. |
Agora, para uma melhor compreensão dessa propriedade, vamos considerar um exemplo e, com isso, demonstraremos diferentes valores da propriedade Overflow.
Exemplo.
Neste exemplo, vamos criar um e colocar algum conteúdo dentro disso e ver como os diferentes valores de propriedades de transbordamento funcionam.
Html
A propriedade Overflow controla o comportamento do conteúdo que transborda a área especificada de um elemento, além disso, a propriedade Overflow foi projetada para elementos em nível de bloco apenas.
Vamos primeiro ilustrar o valor visível da propriedade Overflow.
CSS
.div1transbordamento: visível;
Background-Color: Rosybrown;
Largura: 100px;
Altura: 145px;
borda: 2px preto sólido;
Saída
Usando o valor visível da propriedade Overflow, o conteúdo está sendo mostrado fora da área da caixa.
Agora iremos ilustrar o valor oculto da propriedade Overflow. Aqui está o trecho de código.
.div1estouro: oculto;
Saída
O conteúdo que excede a área da caixa está oculto.
O trecho de código para o valor de rolagem da propriedade Overflow é o seguinte.
.div1Overflow: roll;
Saída
Usando as barras de rolagem, o restante do conteúdo pode ser visto.
E agora veremos como funciona o valor automático da propriedade de estouro.
.div1Overflow: Auto;
Saída
De acordo com o requisito, o valor automático adicionou apenas a barra de rolagem vertical.
Usando o valor automático, o conteúdo transbordante está oculto dentro da caixa com sucesso.
Conclusão
O propriedade flutuante é usado no posicionamento do conteúdo e estruturação do layout de um site, além disso, essa propriedade posiciona um elemento de tal maneira que outros elementos envolvem. O propriedade clara, Por outro lado, lida com os elementos que estão próximos dos elementos que são flutuados. Enquanto isso, o Propriedade de transbordamento controla o comportamento do conteúdo que transborda a área especificada de um elemento. Todas essas propriedades exibem certos valores que executam ações diferentes nessas propriedades. Essas propriedades e seus valores são explicados em profundidade com a ajuda de exemplos neste artigo.