De acordo com o conceito de modelo de caixa CSS, cada elemento da página é uma caixa retangular. O tamanho, a posição e o comportamento dessas caixas podem ser controlados usando CSS. Por comportamento, quero dizer como ele se comporta quando o conteúdo dentro e fora da caixa muda. Por exemplo, se você não definir a altura de uma caixa, a altura da caixa aumentará conforme necessário para acomodar seu conteúdo. Mas o que acontece quando você especifica uma altura ou largura para uma caixa e o conteúdo dentro dela excede isso? Este é o momento de adicionar a propriedade CSS overflow, que permite especificar como lidar com esta situação.
A propriedade overflow possui quatro valores: visível (padrão), oculto, rolagem e auto . Existem também duas propriedades irmãs de overflow, overflow-y e overflow-x, que raramente são usadas.
Vejamos cada um desses valores e discutiremos usos e técnicas comuns.
Visível
Se você não configurar o atributo overflow, o valor padrão do atributo overflow ficará visível. Portanto, em geral, não há razão para definir especificamente a propriedade overflow como visível, a menos que você queira substituir o valor definido em outro lugar.
O importante a lembrar aqui é que embora o conteúdo fora da caixa esteja visível, o conteúdo não afeta o fluxo de trabalho da página. por exemplo:
De modo geral, você pelo menos não precisa definir uma altura fixa para caixas cujo conteúdo é texto, portanto não encontrará essa situação.
Escondido
O valor oposto do valor padrão visível está oculto. Isso esconderá tudo fora da caixa.
Isto é realmente útil para lidar com conteúdo dinâmico que pode causar alguns problemas de layout devido ao excesso de conteúdo. No entanto, lembre-se de que o conteúdo oculto usando este método não ficará visível (a menos que você observe o código-fonte). Por exemplo, alguns usuários definem a fonte padrão do navegador para ser maior do que o esperado. Você empurrará algum texto para fora da caixa e o ocultará completamente...