Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Applying floats to inline elements

Name: float

Value: left | right | inherit | none

Char­ac­ter­is­tics :

  • Float­ing an ele­ment will cause it to move to the left-most or right-most edge of its par­ent container.
  • Float­ing removes the ele­ment from nor­mal doc­u­ment flow and changes the stack­ing context.
  • It and will cause ele­ments below it to shift accordingly.

In the pre­vi­ous arti­cle, floats and clearfix we dis­cussed how floats inter­act with block level ele­ment. Here, we will con­tinue the sim­i­lar dis­cus­sion for inline elements.


Iter­a­tion 1: We have an image and some text inside a sec­tion as shown below.

See the Pen inline-float-1 by Kavit Shah (@kavitshah8) on Code­Pen.


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

See the Pen inline-float-2 by Kavit Shah (@kavitshah8) on Code­Pen.

Con­cept:

  • As we know, mak­ing an ele­ment float removes it from the nor­mal doc­u­ment flow and the next ele­ment occu­pies that space and goes under the floated element.

Ques­tion:

Why does the text in the para­graph not go under the image?

Answer: line-box

The para­graph does go under the floated ele­ment but because of the line-box the text does not cut off as shown in iter­a­tion 3.


Iter­a­tion 3: Shows the para­graph going under the floated element.

See the Pen inline-float-3 by Kavit Shah (@kavitshah8) on Code­Pen.

  • Notice, that the para­graph goes under the floated ele­ment but the text does not cut off because of the line-box.

You may also like...