CSS: Float vs Inline Block - Qual usar em meus layouts? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 04 Horas 32 Min 38 Seg Tempo restante da oferta: 04 32 38 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) CSS: Float vs Inline Block - Qual usar em meus layouts? [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # CSS: Float vs Inline Block - Qual usar em meus layouts? Você sabe quando utilizar "float" e "display: inline-block"? Veja as características de cada um e aprenda a aplicá-los em seus projetos. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 10 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/float-css.png) Olá, Web Developers! Você sabe quando utilizar `float` e `display: inline-block`? Aqui a gente vai ver as características de cada um para te ajudar a escolher qual o melhor a ser usado em determinada ocasião no seu projeto. Ambos têm uma base parecida: permitir que elementos fiquem na mesma linha. Os seus demais comportamentos são totalmente diferentes e muitos desenvolvedores acabam não sabendo quando devem usar um ou outro. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## Float As pessoas normalmente utilizam o `float` para desenvolver colunas em seus layouts ou permitir que elementos de bloco ocupem a mesma linha, mas esta propriedade foi criada originalmente para permitir que um texto envolva um elemento. No exemplo acima, nosso texto está envolvendo a nossa `div`. Normalmente os elementos ocupam uma linha, e aqui temos três linhas ao lado dele. Um dos problemas do `float` é que o elemento pai não vai saber a sua altura, já que o elemento está flutuando. - No *Exemplo 1* podemos ver que a `div` container, com borda verde, apenas interpreta a altura do nosso texto. A altura do nosso elemento flutuante, a `div` azul, é ignorada. - No *Exemplo 2* nós utilizamos outra `div` com a propriedade `clear` para poder limpar os efeitos do `float`, fazendo com que o fluxo dos elementos volte ao normal e o container possa interpretar a altura normalmente. ```html Exemplo 2 ``` Muitas pessoas acham isso feio: ter que colocar um elemento vazio apenas para fazer a altura de um elemento ser interpretada. Isso também tira o sentido da semântica do código. Muitos frameworks, como o *bootstrap*, e bibliotecas de grid, como o *unsemantic*, funcionam assim para poder dar suporte a navegadores mais antigos. - No *Exemplo 3* nós utilizamos outro hack: a propriedade `overflow: auto` no container. Isso faz com qua a gente não precise mais de um elemento apenas para encerrar o comportamento do `float`, mas só funciona bem se tivermos total controle das margens do container. Do contrário, você verá barras de rolagem. ```css .container-overflow{ overflow: auto; } ``` - No *Exemplo 4* temos algo mais complexo, porém mais confiável, muito utilizado em lugares como o `HTML5 Boilerplate`. Então, problemas com barra de rolagem resolvidos! ```css .clearfix:before, .clearfix:after { content: "020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } ``` Criamos uma classe `.clearfix` que cria um pseudo-elemento com o `:before` e `:after`. Ele utiliza a ideia do `overflow` e `clear:both`, e não veremos nada estranho porque também escondemos os pseudo-elementos com `height: 0`. Mas se a ideia das tecnologias é sempre melhorar, por que continuar com essa complexidade toda? [ ![JavaScript - Trabalhando com web workers](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Trabalhando com web workers Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-trabalhando-com-web-workers) ## Inline Block Quando utilizamos `display: inline-block`, também estamos fazendo com que um elemento permaneça na mesma linha. Note a diferença com o primeiro exemplo do `float`: nossa `div` está na mesma linha do texto, mas não são criadas novas linhas em volta dela. Tudo bem, o objetivo aqui é manter elementos na mesma linha. Aqui não teremos problemas com a altura do cointainer ou barra de rolagem. (◠◡◠) Outra vantagem é que como agora ele é um elemento com comportamento de linha, poderemos utilizar as propriedades `text-align` e `vertical-align` para modificar sua posição. Masss … Teremos um probleminha quando precisarmos que os elementos estejam encostados (⌣\_⌣”) No exemplo acima criamos um layout que tem três colunas de larguras iguais que precisam preencher uma linha inteira. Note que entre a `Div 1` e a `Div 2` há um espaço. Se inspecionarmos os elementos veremos que não há margens separando as `divs`. Por quê esse espaço existe? Por causa dele, a nossa `Div 3` foi jogada para a linha de baixo! Acontece que o `inline-block` faz o elemento ter comportamentos de um elemento de linha. Os elementos de linha são basicamente **textos**! ```html Div 1 Div 2 Div 3 ``` Quando escrevemos um texto, queremos que haja espaços entre as palavras, certo? Então o navegador interpreta os espaços que damos entre as palavras. Para organizar melhor o nosso *HTML*, nós colocamos uma `div` em cada linha. Essa quebra de linha no código é interpretado como espaço e acaba interferindo na renderização de elementos `inline` ou `inline-block`. Caso você tenha o costume de minificar o seu código, os espaços serão removidos e você não terá esse problema. Exemplo do resultado que queremos: Aqui algumas maneiras de resolver isso com `HTML`: ```html Div 1Div 2Div 3 Div 1 Div 2 Div 3 Div 1Div 2Div 3 ``` Aqui algumas maneiras de resolver isso com `CSS`: ```css /* Declarar uma margem negativa */ .column{ margin-right: -4px; } /* Declarar font-size do container como 0 fará * o espaço ser 0 também, mas teremos que declarar * novamente o tamanho da fonte da nossa coluna. * Esse hack pode ter problemas em algumas versões * do Android e pode nos atrapalhar se nossos elementos * estiverem usando unidades como "em" */ .container{ font-size: 0; } .column{ font-size: 16px; } ``` ## Concluindo **Float**: Prefira usar quando quiser que um texto ou outros elementos contornem um determinado elemento. Essa é a real função dele. **Inline Block**: Vimos aqui que o único problema do `inline-block` ocorre quando precisamos que os elementos fiquem encostados. Caso esse não seja o seu caso, o `inline-block` resolverá seus problemas sem a necessidade de algum hack. Caso você não precise dar suporte total a navegadores mais antigos, então é mais recomendado que você monte seus layouts com as propriedades do ***`flex-box`***. Alguma ideia, dúvida ou sugestão? Compartilhe com a gente aí nos comentários! [ ![IA Para Devs - Cursor AI](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ia-para-devs.svg) Curso IA Para Devs - Cursor AI Conhecer o curso ](https://www.treinaweb.com.br/curso/ia-para-devs-cursor-ai) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07101943/Aspect-Ratio-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS - Altura automática proporcional à largura sem JavaScript ](https://www.treinaweb.com.br/blog/css-altura-automatica-proporcional-a-largura-sem-javascript) Aprenda a definir elementos com dimensões proporcionais com CSS sem nenhuma linha de JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/POSITIONS-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Position, estilizando elementos com CSS. ](https://www.treinaweb.com.br/blog/position-estilizando-elementos-com-css) Neste artigo nos iremos aprender sobre position em elementos no CSS, e sua importância para estilizações das nossas páginas web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/01111116/jogo-feito-400x280.png) [ Desenvolvimento de Jogos ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-de-jogos) 9 anos atrás ## [ Como um jogo digital é criado? ](https://www.treinaweb.com.br/blog/como-um-jogo-digital-e-criado) Veja nesse artigo como um jogo digital é criado e os principais conceitos envolvidos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/guia-da-linguagem-python-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Guia da linguagem Python ](https://www.treinaweb.com.br/blog/guia-da-linguagem-python) Entenda os principais conceitos para iniciar seus estudos neste guia da linguagem Python. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/CSS-IN-JS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ CSS in JS ](https://www.treinaweb.com.br/blog/css-in-js) Veja neste artigo o CSS in JS, a técnica que permite escrever estilos CSS no JavaScript, deixando a aplicação flexível e modularizada. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075048/Font-Awesome-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Dominando o Font Awesome ](https://www.treinaweb.com.br/blog/css-dominando-o-font-awesome) Aprenda como utilizar todo o potencial do Font Awesome para facilitar o uso de ícones em suas aplicações. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07102001/CSS-Box-Model-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS - Definindo o cálculo de dimensões com box-sizing ](https://www.treinaweb.com.br/blog/css-definindo-o-calculo-de-dimensoes-com-box-sizing) Aprenda a definir como o CSS calcula as dimensões dos seus elementos e evite que seu layout quebre inesperadamente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155045/Flip-Cards-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Aprenda a Criar o Efeito de Flip Cards ](https://www.treinaweb.com.br/blog/css-aprenda-a-criar-o-efeito-de-flip-cards) Aprenda a criar o efeito de Flip Cards com CSS puro de maneira bem simples. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/02075846/0-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Grid – Um Guia Interativo (Parte 2 – Itens) ](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-2-itens) Aprenda definitivamente a trabalhar com os Itens do CSS Grid com este Guia Interativo para facilitar o seu trabalho na construção de layouts com CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/01182054/0-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Grid – Um Guia Interativo (Parte 1 – Containers) ](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-1-containers) Aprenda definitivamente a trabalhar com CSS Grid com este Guia Interativo para facilitar o seu trabalho na construção de layouts com CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/01152334/container-1-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Flexbox - Um Guia Interativo (Parte 2 - Itens) ](https://www.treinaweb.com.br/blog/css-flexbox-um-guia-interativo-parte-2-itens) Aprenda a trabalhar com o CSS Flexbox com este guia definitivo e interativo! Vamos ver as propriedades dos itens. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/01152250/ALINHAMENTO-1-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Flexbox - Um Guia Interativo (Parte 1 - Containers) ](https://www.treinaweb.com.br/blog/css-flexbox-um-guia-interativo-parte-1-containers) Aprenda a trabalhar com o CSS Flexbox com este guia definitivo e interativo! Vamos ver primeiro as propriedades dos containers. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **04h 32min 38s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58