LabEx
EntrarJunte-se

Técnica CSS Clearfix

Beginner

This tutorial is from open-source community. Access the source code

Introdução

Neste laboratório, aprenderemos sobre a técnica clearfix em CSS. Esta técnica é usada para garantir que um elemento limpe seus filhos flutuantes. Exploraremos como implementar esta técnica em nosso código e discutiremos suas limitações. Ao final deste laboratório, você terá uma sólida compreensão de como usar clearfix em seus layouts CSS.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 95%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Clearfix

index.html e style.css já foram fornecidos na VM.

Para garantir que um elemento se auto-limpe de seus filhos ao usar float para construir layouts, você pode usar o pseudo-elemento ::after e aplicar content: '' para permitir que ele afete o layout. Adicionalmente, use clear: both para fazer com que o elemento limpe os floats esquerdo e direito. No entanto, esta técnica só funciona corretamente se não houver filhos não flutuantes no contêiner e não houver floats altos antes do contêiner com clearfix, mas no mesmo contexto de formatação (por exemplo, colunas flutuantes). Por exemplo:

<div class="clearfix">
  <div class="floated">float a</div>
  <div class="floated">float b</div>
  <div class="floated">float c</div>
</div>
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.floated {
  float: left;
  padding: 4px;
}

Observe que o uso de uma abordagem mais moderna, como flexbox ou grid layout, é recomendado em vez de usar float para construir layouts.

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório Clearfix. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.