2

I am trying to understand the float behavior, so I wrote the simple two paragraphs below.

The second paragraph which is float:none, appears to "contain/surround" the first paragraph which is float:left.

Someone please help me understand why is that.

<p style="float:left; border:red solid 1px;">
  first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph.
</p>

<p style="float:none; border:green solid 1px;">
  second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph.</p>
j08691
  • 204,283
  • 31
  • 260
  • 272
C J
  • 298
  • 4
  • 13
  • 1
    This is the expected behaviour. If you make the red one `width: 30%`, you will see that the text of the green one goes around – Brewal Feb 25 '15 at 17:01
  • It's also not clear what you are trying to achieve by floating the paragraph in the first place. – Paulie_D Feb 25 '15 at 17:03
  • I think what you need is a clearfix to clear the left floated paragraph. So in this case only to your example, you could add in-between the paragraphs with a `
    ` and that should fix the issue. For more information on floats and clearing floats, http://nicolasgallagher.com/micro-clearfix-hack/     – Seed Feb 25 '15 at 17:04
  • 1
    possible duplicate of [How does CSS float work? Why doesn't the height of a container element increase if it contains floated elements?](http://stackoverflow.com/questions/16568272/how-does-css-float-work-why-doesnt-the-height-of-a-container-element-increase) – skobaljic Feb 25 '15 at 17:12
  • @skobaljic: The answer to that question doesn't answer this one at all. – BoltClock Feb 25 '15 at 17:14
  • 2
    There are 20 Demos inside and lots of info which covers essence of the OP's question. – skobaljic Feb 25 '15 at 17:17
  • @skobaljic: Absolutely **none** of that info addresses this question. I've seen that answer enough times to know. – BoltClock Feb 25 '15 at 17:19
  • 1
    OP's main point in question is: **I am trying to understand the float behavior** and because of that he created an example with two paragraphs. For me, the useful answer would explain floating, it would not be a story about two paragraphs. That is just the way I see it. – skobaljic Feb 25 '15 at 17:36
  • @skobaljic: Floats are an extremely complicated topic. Based on the example with two paragraphs, it would seem that the OP is exploring a different aspect of floats from what is described in that question. In fairness, the "How does CSS float work?" portion of the original title of that question could have thrown you off. I've edited that bit out. – BoltClock Feb 25 '15 at 17:45

3 Answers3

4

The first paragraph is taken out of the flow by being floated, while the second paragraph remains in flow, so the box of the second paragraph is positioned as though the first paragraph were not there.

However, the text in the second paragraph is pushed down by the first paragraph so that it remains visible. The technical reason for this is that the text is inline content, which flows along a set of line boxes. From the spec:

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.

[...]

If a shortened line box is too small to contain any content, then the line box is shifted downward (and its width recomputed) until either some content fits or there are no more floats present.

Since the text is pushed down, this causes the boundaries of the second paragraph box to extend downwards as well, to accommodate the new position of the text.

As mentioned in other answers, this behavior is typically prevented by clearing the float:

<p style="float:left; border:red solid 1px;">
  first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph.
</p>

<p style="clear:both; float:none; border:green solid 1px;">
  second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph.</p>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Thanks for "The first paragraph is taken out of the flow by being floated, while the second paragraph remains in flow". This clears the float behaviour in my mind. – C J Feb 25 '15 at 17:42
0

Like the name suggests an element floats, so you have to clear elements so that they appear in an order that you would like.

An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float. Again an illustration probably does more good than words do.

enter image description here

enter image description here

This information was taken from here, which will help explain floats better.

probablybest
  • 1,403
  • 2
  • 24
  • 47
  • 1
    This doesn't answer the OP's question of why it looks like the second paragraph contains the first. – j08691 Feb 25 '15 at 17:08
-1

The elements after the floating element will flow around it. The elements before the floating element will not be affected.

If you want to make the HTML flow normal again you need to clear it : css-clear

Mat
  • 435
  • 3
  • 12
  • It may be the thing of perception, but I do not think this is a good answer. Correct answer should be similar or same as [this one](http://stackoverflow.com/questions/16568272/how-does-css-float-work-why-doesnt-the-height-of-a-container-element-increase#16568504) – skobaljic Feb 25 '15 at 17:11
  • He ask why his greed div react like this, my answer is short and don't have a draw on it, but it's as simple as that : The elements after the floating element will flow around it. The elements before the floating element will not be affected. – Mat Feb 25 '15 at 17:20