Basicamente, você adicionou mais confusão ao seu código, o que está criando mais confusão, então primeiro tento remover a confusão que dificulta a compreensão do problema real.
Antes de tudo, precisamos estabelecer que qual é a verdadeira questão?
É por isso que o inline-block
elemento " " é empurrado para baixo.
Agora começamos a entender e remover a desordem primeiro.
1 -
Por que não dar a todos os três divs a mesma largura de borda?
Vamos dar.
2 - O elemento flutuante tem alguma conexão com o elemento de bloco embutido sendo empurrado para baixo? Não, não tem nada a ver com isso.
Então, removemos completamente essa div . E você está testemunhando o mesmo comportamento do elemento de bloco embutido sendo empurrado para baixo.
Aí vem a vez de algumas literaturas para entender a idéia das caixas de linhas e como elas são alinhadas na mesma linha, e leia atentamente o último parágrafo, porque existe a resposta da sua pergunta.
A linha de base de um 'bloco embutido' é a linha de base de sua última caixa de linha no fluxo normal, a menos que não tenha caixas de linha em fluxo ou se sua propriedade 'estouro' tiver um valor calculado diferente de 'visível', em Nesse caso, a linha de base é a borda da margem inferior.
Se você não tiver certeza da linha de base , aqui está uma breve explicação em palavras simples.
Todos os caracteres, exceto 'gjpqy', são escritos na linha de base. Você pode pensar na linha de base como se você desenhasse uma linha horizontal simples, assim como o sublinhado logo abaixo desses "caracteres aleatórios". caracteres na mesma linha, a parte inferior desses caracteres ficaria abaixo da linha.
Portanto, podemos dizer que todos os caracteres, exceto 'gjpqy', são escritos completamente acima da linha de base, enquanto parte desses caracteres é escrita abaixo da linha de base.
3 - Por que não verificar onde está a linha de base da nossa linha? Eu adicionei alguns caracteres que mostram a linha de base da nossa linha.
4 - Por que não adicionar alguns caracteres em nossos divs também para encontrar suas linhas de base no div? Aqui, alguns caracteres adicionados em divs para esclarecer a linha de base .
Agora, quando você entender sobre a linha de base, leia a seguinte versão simplificada sobre a linha de base dos blocos embutidos.
i) Se o bloco embutido em questão tiver sua propriedade de estouro definida como visível (que é por padrão, portanto, não é necessário configurá-lo). Então, sua linha de base seria a linha de base do bloco da linha que a continha.
ii) Se o bloco embutido em questão tiver sua propriedade de estouro definida como OUTROS QUE visível. Então, sua margem inferior estaria na linha de base da linha da caixa de contenção.
- Primeiro ponto em detalhes
Agora, observe isso novamente para esclarecer seu conceito de que o que está acontecendo com a div verde . Se ainda houver alguma confusão, aqui serão adicionados mais caracteres próximos à div verde para estabelecer a linha de base do bloco que contém e div verde será alinhada.
Bem, agora estou afirmando que eles têm a mesma linha de base? CERTO?
5 - Então, por que não sobrepô-los e ver se eles se encaixam corretamente um no outro? Então, eu trago a terceira div-esquerda: 35px; verificar se eles têm a mesma linha de base agora ?
Agora, temos nosso primeiro ponto comprovado.
- Segundo ponto em detalhes
Bem, após a explicação do primeiro ponto, o segundo ponto é facilmente digerível e você vê que a primeira div que possui uma propriedade de estouro definida como diferente de visível (oculta), tem sua margem inferior na linha de base da linha.
Agora, você pode fazer algumas experiências para ilustrar melhor.
- Defina o primeiro estouro de div: visível (ou remova-o completamente) .
- Defina o segundo estouro div: diferente de visível .
- Defina o estouro de ambas as divs: diferente de visível .
Agora traga de volta sua bagunça e veja se tudo está lhe agradando.
- Traga de volta a sua div flutuada (é claro que é necessário
aumentar a largura do corpo) Você vê que ela não tem efeito.
- Traga de volta as mesmas margens ímpares .
- Defina div verde para transbordar: visível conforme definido na sua pergunta (esse desalinhamento deve-se ao aumento da largura da borda de 1 para 5 px; portanto, se ajustar o negativo à esquerda, você verá que não há problema)
- Agora remova os caracteres adicionais que adicionei para ajudar no entendimento . (e, claro, remova a esquerda negativa)
- Por fim, reduza a largura do corpo, porque não precisamos mais de uma largura maior.
E agora estamos de volta para onde começamos.
Espero ter respondido sua pergunta.