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.
<div class="container">
<div class="floating" ></div>
Exemplo 2
<p class="clear" ></p>
</div>
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.
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. .container-overflow{
overflow: auto;
}
HTML5 Boilerplate
. Então, problemas com barra de rolagem resolvidos! .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?
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!
<div class="container" >
<div class="column">Div 1</div>
<div class="column">Div 2</div>
<div class="column">Div 3</div>
</div>
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
:
<!-- Deixar tudo na mesma linha -->
<!-- Péssimo, pois deixa o código muito bagunçado -->
<div class="container" >
<div class="column">Div 1</div><div class="column">Div 2</div><div class="column">Div 3</div>
</div>
<!-- Deixar a tag de fechamento junto à tag de abertura do elemento seguinte -->
<!-- Melhora um pouquinho, mas continua estranho -->
<div class="container" >
<div class="column">Div 1
</div><div class="column">Div 2
</div><div class="column">Div 3</div>
</div>
<!-- Criar um comentário entre a quebra de linha -->
<!-- Muita gente prefere esse -->
<div class="container" >
<div class="column">Div 1</div><!--
--><div class="column">Div 2</div><!--
--><div class="column">Div 3</div>
</div>
Aqui algumas maneiras de resolver isso com 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;
}
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!
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 artigosEntenda o que são Micro Front-ends, como funcionam, suas vantagens e quando você deve escolher esta...
Fizemos uma série de entrevistas com desenvolvedores chamada "TW Entrevista". O entrevistado de hoje...
Yarn nasceu para ser uma opção rápida e segura de se gerenciar dependências em JavaScript.
Fizemos uma série de entrevistas com desenvolvedores chamada “TW Entrevista”. O primeiro entrevistad...
Os desenvolvedores de front-end e back-end se completam na maioria dos casos. Se faz indispensável s...
Veja várias dicas para alavancar a sua carreira como Desenvolvedor Front-End
Devo começar minha carreira como desenvolvedor Front-End, Back-End ou FullStack?
Aprenda a criar animações incríveis e interativas de forma bem simples para a web utilizando o mo.js
Aprenda a criar formas e imagens vetoriais em SVG para usar em suas páginas web de maneira bem simpl...
Aprenda a começar a trabalhar com SVG para a criação de formas e efeitos no Front-End.
Conheça mais uma lista de extensões do VS Code que ajudarão a melhorar a sua produtividade e facilit...
Veja mais uma lista com as melhores extensões disponíveis do VS Code para Front-End e melhore a efic...