Applying floats to inline elements
Value: left | right | inherit | none
- 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.
Iteration 2: We want to wrap the text around an image. We can apply float:left to an image and it will work.
- 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.
Why does the text in the paragraph not go under the image?
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.
- Notice, that the paragraph goes under the floated element but the text does not cut off because of the line-box.