3

Todo mundo que mexe com programação web já passou por isso:

.children {
  float: left;
}
<div class="parent">
  <div class="children">
    Teste
  </div>
</div>

Se vocês usarem o Inspect Element acima podem notar que no elemento .parent o height é 0px.

Nunca li por qual motivo isso acontece. Isso faz parte da pergunta, se alguém souber e puder explicar, seria bom.

Mas o que eu faço para resolver isso ? Algo que eu aprendi há um tempo, para não ter que usar o clear: both:

.parent {
  display: table;
}
.children {
  float: left;
}
<div class="parent">
  <div class="children">
    Teste
  </div>
</div>

Podem notar agora que o elemento .parent tem a mesma altura que o .children, mesmo com float. Embora já faça isso há um tempo e me ajuda muito, gostaria de saber porque isso acontece.

  1. Qual o efeito de table em float ?

  2. E quando não se faz isso porque o elemento pai fica com height: 0px ?

2 Respostas 2

2

1) O efeito de table em float não é nenhum, só que table tem outro display (table) ao contrário do display: block da div. Como table sempre foi usado para ter elementos dentro o display desta tem a altura do conteúdo

Isto faz com que o flow dos elementos seja um bocadinho diferente, o que afecta por vez os elementos filhos de maneira diferente.

2) Uma div cujos filhos sejam só elementos com float perde a altura porque a alternativa é feia de mais: pensa, se o elemento só contém floats e o elemento pai tivesse altura haveria de acontecer uma grande linha (de uma cor qq) com uma height enorme com elementos em cada ponta do site (esq. e direito)

Assim, sem altura, ninguém percebe que existe um elemento (isto, se usares uma div).

3
  • display: table substitui o clear: both no caso de definir um sistema de grids como no bootstrap, com as colunas flutuantes?
    – Woss
    Commented 2/02/2017 às 13:01
  • @AndersonCarlosWoss não, o clear é para quando sabes onde os elementos vão estar. Sendo que o display: table faz uma tabela e essa tabela tem conteudo a tabela fica com a height dos filhos
    – MoshMage
    Commented 2/02/2017 às 13:05
  • 1
    @AndersonCarlosWoss o bootstrap usa margin para 'flutuar' as colunas Commented 2/02/2017 às 13:06
0

O float originalmente foi criado para as imagens flutuarem nos textos.

E quando se faz isso, o elemento filho 'flutua' no pai, ou seja se o pai não tem nenhum tamanho definido ele fica zerado que é por default.

Talvez isso seja mais completo pra você: https://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell

4
  • Você quer dizer que o default height é 0 ?
    – MagicHat
    Commented 2/02/2017 às 15:00
  • @MagicHat da div sim Commented 2/02/2017 às 15:19
  • 1
    Eu tava achando que height default é auto...
    – MagicHat
    Commented 2/02/2017 às 15:23
  • @MagicHat Eu sei.. talvez me expressei de forma incorreta, quis dizer que se não definir nada sua altura é zero! Commented 3/02/2017 às 0:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .