CODEWITHSUNDEEP
htmlcsscss-float
Ankur Agarwal
Ankur Agarwal

Reputation: 24758

Why is the floated element overlapping the element below and not the other way round?

div {
  background-color: #00FFFF;

}
p {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin: 0px;

}

#p1 {
  background-color: red;
float: left;


}
#p2 {
  background-color: green;
}
#p3 {
  background-color: orange;
}
#p4 {
  background-color: yellow;
}

span {
  position: relative;
}

#s1 {
 top: 1px;
 left: 1px;
}

#s2 {
  top: 2px;
 left: 2px;

}
#s3 {
  top: 3px;
 left: 3px;

}
#s4 {
  top: 4px;
 left: 4px;

}
<h1>Floating Elements</h1>

<div>
  <p id="p1"><span id="s1">A</span></p>
  <p id="p2"><span id="s2">B</span></p>
  <p id="p3"><span id="s3">C</span></p>
  <p id="p4"><span id="s4">D</span></p>
  <section>This is regular content continuing after the the paragraph boxes.</section>
</div>

Upvotes: 0

Views: 398

Answers (4)

Zahir Kelloud
Zahir Kelloud

Reputation: 41

Lose the float: left; on #p1{}, add a position:relative; to your div{} and position: absolute; top: 0; left: 0; to your #p2{}. Not sure what you're trying to achieve but if you rather keep the float: left; on #p1{} than you need to clear: both; on p{}.

Upvotes: 0

C3roe
C3roe

Reputation: 96306

Why so ?

Because that is how float works.

When you are putting float on an element, you are not actually saying much about how that element itself should displayed - but rather how/that the following content should flow around it.

To be more precise, the following inline content.

Since your paragraphs are block elements, and you have also fixed their width and height to 50px, this is the result you get - the inline content of the #p2 paragraph does flow around the #p1 paragraph; but width and height restrictions of the parent paragraph don't allow that parent to grow accordingly.

Edit:
If you're having trouble understanding what I am trying to say, consider the following simpler example:

#floated {
  float:left;
  width: 50px;
  height: 50px;
  border:1px solid red;
}

#unfloated {
  border:1px solid blue;
  background: green;
}
<div id="floated"></div>

<div id="unfloated">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>

As you can easily see, without a background for the floated element, the second, non-floated div element stretches across the whole width, "under" the floated element, and only its inline content, the Lorem Ipsum text, floats around the floated element.

That is how float works.

In your example, you see the "B" show up in the second square - because the parent block element of that B is limited to 50px in width and height, so it can not grow to encompass the "B", the "B" text simply flows out of its parent element dimensions as is standard with the default overflow:visible.

Upvotes: 2

Michael Coker
Michael Coker

Reputation: 53674

From MDN's Stacking and float

For floating blocks the stacking order is a bit different. Floating blocks are placed between non-positioned blocks and positioned blocks

And it goes on further to say

If the opacity of the non-positioned block (#p2 in your example) is reduced, then something strange happens: the background and border of that block pops up above the floating blocks, but still under positioned blocks.

Upvotes: 1

Shady Alset
Shady Alset

Reputation: 5714

You need to use the clear-fix after floated elements, something like:

Elements after a floating element will flow around it. To avoid this, use the clear property.

CSS Layout - float and clear

div {
  background-color: #00FFFF;

}
p {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin: 0px;

}

#p1 {
  background-color: red;
float: left;


}
#p2 {
  background-color: green;
}
#p3 {
  background-color: orange;
}
#p4 {
  background-color: yellow;
}

span {
  position: relative;
}

#s1 {
 top: 1px;
 left: 1px;
}

#s2 {
  top: 2px;
 left: 2px;

}
#s3 {
  top: 3px;
 left: 3px;

}
#s4 {
  top: 4px;
 left: 4px;

}

.clear { clear:both; }
<h1>Floating Elements</h1>

<div>
  <p id="p1"><span id="s1">A</span></p>
  <div class="clear"></div>
  <p id="p2"><span id="s2">B</span></p>
  <p id="p3"><span id="s3">C</span></p>
  <p id="p4"><span id="s4">D</span></p>
  <section>This is regular content continuing after the the paragraph boxes.</section>
</div>

Upvotes: 0

Related Questions