Understanding CSS Float

Question

I am leanring HTML and CSS. I have been muddled up by float property. I don't why this is confusing me a lot. I am using these articles to understand. I got this part when we apply float element is put out of the normal flow and floated to left and right of it's parent based on the value of float and the content below it will flow around it and try to wrap it. The part where I am confused is I'll explain by example. I have three div A, B, C. As I have shared in the snippet:

body {
  background: #eaeaed;
}
div{
  border : 2px solid #ff00ff;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.divA{
  background: yellow;
}
.divB{
  background: green;
}
.divC{
  background: blue;
}

<div class="divA">
  <span>Div A</span>
</div>
<div class="divB">
  <span>Div B</span>
</div>
<div class="divC">
  <span>Div C</span>
</div>

Now when I apply float:left to divA. It gets moved out of the flow and divB takes it's position. But I am not able to understand what is happening with the text inside divB. Why the text of B and C are collapsing/overlapping. I mean when A is floated, it should be moved out of the flow and the element below should take it's place but don't know why only divB is taking it's place but B's content is stil there as it is. Thanks for you help.

body {
  background: #eaeaed;
}
div{
  border : 2px solid #ff00ff;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.divA{
  background: yellow;
  float: left;
}
.divB{
  background: green;
}
.divC{
  background: blue;
}

<div class="divA">
  <span>Div A</span>
</div>
<div class="divB">
  <span>Div B</span>
</div>
<div class="divC">
  <span>Div C</span>
</div>

BoltClock · Accepted Answer · 2016-10-26 15:38:35Z

4

The box of B moves underneath A's original position, but the text does not. The text has to wrap around the float instead, since the main idea of floats is for text to wrap around rather than be overlapped by the floating content.

The word "wrap" implies that the text should appear next to A rather than underneath it, but the width of the two elements is the same leaving no room for the text to appear side by side with A. Increasing the width of B shows that the text does start off side by side when there is room for it to do so:

body {
  background: #eaeaed;
}
div{
  border : 2px solid #ff00ff;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.divA{
  background: yellow;
  float: left;
}
.divB{
  width: 160px;
  background: green;
}
.divC{
  background: blue;
}

<div class="divA">
  <span>Div A</span>
</div>
<div class="divB">
  <span>Div B</span>
</div>
<div class="divC">
  <span>Div C</span>
</div>

The B text appears to be overlapping with the C text because, strictly speaking, the B text is overflowing the box as a consequence of floating A. Content that's overflowing a box — even if that box has overflow: visible, as is the case for all three elements here — has no effect on content outside the box.

edited Oct 26, 2016 at 15:38

answered Oct 26, 2016 at 15:21

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mr_Green Over a year ago

So, the floating Box A is acting as content of Box B here?

BoltClock Over a year ago

@Mr_Green: No, A is taken out of the flow and B is laid out as though A was never there. Since both elements have the same dimensions it just gives the appearance of one box "containing" the other. And as the question has established, the text behaves differently.

Hitesh Kumar Over a year ago

@BoltClock I am not able to understand: "wrap" implies that the text should appear next to A rather than underneath it. When I set float:right of A, A goes to right but B and it's content remains in the left as it is. Can you please help me to understand what is happening here. Here's the pen codepen.io/programmerhk/pen/wzkoYE?editors=1100

Oriol · Accepted Answer · 2016-10-26 15:39:38Z

See Visual formatting model - Floats:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

So .divA overlaps .divB. But the line boxes in .divB shrink.

It's easier to see if you let .divB be wider than the float:

body {
  background: #eaeaed;
}
div {
  border: 2px solid #ff00ff;
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.divA {
  background: yellow;
  float: left;
  width: 100px;
  height: 80px;
}
.divB {
  background: green;
}
.divC {
  background: blue;
}

<div class="divA">
  <span>Div A</span>
</div>
<div class="divB">
  <span>Div B</span>
</div>
<div class="divC">
  <span>Div C</span>
</div>

However, in your case .divB has the same width as .divA. So the line box shrinks to 0. Therefore, .divB's text does not fit there, and wraps to the next line box. That line box will overflow .divB and overlap .divC because you used equal line-height and height.

Collectives™ on Stack Overflow

Understanding CSS Float

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related