Be the first user to complete this post
|
Add to List |
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.
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.
Also Read:
- css: margin does not work
- Two column layout in css
- Understanding callbacks in javascript
- A simple requestAnimationFrame example visually explained
- position: relative