Applying floats to inline elements

Name: float

Value: left | right | inherit | none

Characteristics :

Floating an element will cause it to move to the left-most or right-most edge of its parent container.
Floating removes the element from normal document flow and changes the stacking context.
It and will cause elements below it to shift accordingly.

In the previous article, floats and clearfix we discussed how floats interact with block level element. Here, we will continue the similar discussion for inline elements.

Iteration 1: We have an image and some text inside a section as shown below.

[codepen_embed height="268" theme_id="0" slug_hash="xZgjGj" default_tab="result" user="kavitshah8"]See the Pen inline-float-1 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

Iteration 2: We want to wrap the text around an image. We can apply float:left to an image and it will work.

[codepen_embed height="268" theme_id="0" slug_hash="EPZLVE" default_tab="result" user="kavitshah8"]See the Pen inline-float-2 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

Concept:

As we know, making an element float removes it from the normal document flow and the next element occupies that space and goes under the floated element.

Question:

Why does the text in the paragraph not go under the image?

Answer: line-box

The paragraph does go under the floated element but because of the line-box the text does not cut off as shown in iteration 3.

Iteration 3: Shows the paragraph going under the floated element.

[codepen_embed height="268" theme_id="0" slug_hash="VePxvg" default_tab="result" user="kavitshah8"]See the Pen inline-float-3 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

Notice, that the paragraph goes under the floated element but the text does not cut off because of the line-box.

css 17 inline 2 floats 2