Problem with float css

Question

Problem with float css

Navigation

#1 by (0 votes)

0

I've created this code below to simulate the same problem on a website I'm developing to practice my html and css. I have two elements that float to the left and one to the right but when I clean the float of the second element the third element (right) is pushed down. How do I solve this? 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;
}

float css

asked by anonymous 01.07.2018 / 23:31

1 answer

Clear browser address bar without refresh in Django Error with BigQuery using GoogleApp

score 0 · Answer 1

The elements obey the fluidity where they are arranged. The third div will always be next to the second with float: right .

Placing clear: left in the second div , you are saying that nothing can be on the left side of this div , soon it will stay below the first, and the third will be on the same line as the second, but on the right side .

It's not even a matter of hierarchy, since the elements are siblings. The 3% with% s are in the same hierarchy. Only the second div could be on the same line as the first with div , since it is the next element.

In your case, the third float: right will be on the same line as the second, because it is the next element.