0

Gente criei esse código abaixo para simular o mesmo problema em um site que estou desenvolvendo para praticar meu html e css. Tenho dois elemento que flutuam para esquerda e um para a direita mas quando limpo o float do segundo elemento o terceiro elemento(direita) é empurrado para baixo. como resolvo isso? html:

<div class="primeiro"></div>
<div class="segundo"></div>
<div class="terceiro"></div>



**css:**
    div{
    width: 20px;
    height: 20px;
    background: pink;
    border: 2px solid black;
    }

.primeiro{
  float: left;
}

.segundo{
 float: left;
 clear: left;
}

.terceiro{
  float: right;
}
4
  • O terceiro vem depois do segundo, logo ele vai ficar na mesma linha do segundo. Vc queria que o terceiro ficasse na mesma linha do primeiro?
    – Sam
    Commented 1/07/2018 às 21:46
  • blz....não sabia que elementos flutuantes respeitavam hierarquia... valew Commented 1/07/2018 às 22:52
  • Cara, nesse caso não é nem hierarquia, é o flow dos elementos mesmo. Eles são irmãos, não tem hierarquia. Pelo menos entendo hierarquia como pai e filhos, uma árvore.
    – Sam
    Commented 1/07/2018 às 22:54
  • A resposta não atendeu? Há algum problema? Por favor, questione ou marque ✔️ para dar a pergunta como resolvida. Abs!
    – Sam
    Commented 14/07/2018 às 7:25

1 Resposta 1

0

Os elementos obedecem a fluidez onde eles estão dispostos. A terceira div estará sempre ao lado da segunda com float: right.

Colocando clear: left na segunda div, você está dizendo que nada poderá estar ao lado esquerdo dessa div, logo ela irá ficar abaixo da primeira, e a terceira ficará na mesma linha da segunda, mas do lado direito.

Não é nem uma questão de hierarquia, já que os elementos são irmãos. As 3 divs estão na mesma hierarquia. Apenas a segunda div poderia ficar na mesma linha da primeira com float: right, já que ela é o elemento seguinte.

No seu caso, a terceira div vai ficar na mesma linha da segunda, por ser o elemento seguinte.

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 .