O float é utilizado para posicionar elementos ao lado do conteudo para estilizar a página ou fazer um design atrativo.
Por exemplo, caso tivermos uma imagem e um texto e quisermos fazer com que a imagem vá para a direita do texto, nessa hora nós vamos utilizar o elemento float para que a imagem mude de posição para a direita do texto.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat eligendi vero, blanditiis deserunt quam ipsum delectus culpa, autem ab molestiae magni tempora, minus ad? Ipsa reiciendis distinctio sed
porro laborum.
Neste exemplo a imagem está do lado esquerdo do texto, porém eu quero que ela fique no lado direito do texto.
Para isso vamos utilizar a propriedade float junto do valor da direção que nós queremos a imagem.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi harum nihil non nam consequuntur ullam possimus dicta, officia quidem id quo hic magnam veniam quod, provident adipisci tempore maiores
obcaecati.
No exemplo acima eu utilizei a propriedade float e o valor right para fazer com que a imagem flutuasse para o lado direito do texto.