A floating element's containing block is the nearest ancestral block-level element. In the case below, P tags are the containing block for all 3 floating images. Turning on the border helps you to see the containing block (and any overflow that happens). This can often assist in decision-making when developers are unsure if a clear might be necessary.
This is paragraph text. Within the content of this paragraph is an image that's been floated.
The containing block for this floated image is the paragraph. Note how the image overflows out of the containing block.
... Fusce et ipsum. Nullam vel sapien nec pede luctus fermentum. Ut feugiat, leo non mattis gravida, felis dui mollis nunc, non auctor diam nisi interdum nisl. Sed a tortor in erat porta laoreet. Donec tempus accumsan lorem. Proin turpis risus, accumsan eu, tempor at, pellentesque a, risus.
Sed aliquet. Curabitur a est. Sed in enim. Quisque hendrerit enim sed tortor. Mauris vulputate imperdiet ipsum.
Since this paragraph does not clear the float, the containing block moves up to fill the void beneath the paragraph above. However, the content must flow around the floated image to the right. ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis felis.
Sed pulvinar diam et nulla. Praesent mauris risus, lacinia in, consequat et, adipiscing ut, leo. Morbi neque ante, pharetra et, pulvinar ac, facilisis a, augue.Donec sagittis tortor eget libero fermentum dignissim. Quisque et lorem. Fusce et ipsum.
Nullam vel sapien nec pede luctus fermentum. Ut feugiat, leo non mattis gravida, felis dui mollis nunc, non auctor diam nisi interdum nisl.
Sed a tortor in erat porta laoreet.
Here, the containing block for this paragraph is overlapped by the image that overflows out of the containing block of the second paragraph.
This prevents the image for this paragraph from positioning itself at the left edge of the content DIV. ...
Sed aliquet. Curabitur a est.Sed in enim. Quisque hendrerit enim sed tortor. Mauris vulputate imperdiet ipsum. Nam laoreet mauris sed risus. Vivamus felis. Donec viverra. Nullam vitae arcu.
Mauris at mauris. Praesent elit eros, accumsan a, vehicula et, eleifend quis, mi. Morbi magna neque, luctus vitae, interdum quis, ultricies et, nisi. Curabitur malesuada ullamcorper diam.
Nam tempus, dui ut elementum vestibulum, urna justo blandit elit, et viverra nulla ipsum at libero. In turpis tortor, semper vitae, fermentum vitae, eleifend semper, erat. Vivamus quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum mattis, justo vel auctor placerat, mi nisl viverra dui, sed tempor ante diam vel libero. Etiam metus leo, condimentum sed, tempor ut, tincidunt ac, ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla aliquet eleifend tortor. Nulla metus. Mauris tristique sem sed elit. Ut non lectus pretium lorem varius facilisis. Aliquam consectetuer sem eu nibh. Proin eleifend ligula eu erat vestibulum hendrerit. Fusce gravida, lacus at fringilla tempor, nisl purus bibendum mauris, quis nonummy turpis libero eu tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed varius, sem faucibus porta aliquam, purus dolor pulvinar velit, vitae venenatis orci pede vitae pede. Vestibulum laoreet urna id lacus.
Here are a few rules which govern the placement of floating elements. More details can be found in Eric Meyer's book, CSS: The Definitive Guide.
- The outer left edge of a left-floated element can only go as far left as the inner left edge of its containing block's content area. The same holds true for a right-floated element—its outer right edge cannot go past the inner right edge of the containing block's content area.
- Floats cannot overlap/obscure each other. If an element is floated left and another
floated element is already there, the latter element will be placed against the outer
right edge of the previously floated element (we saw that in the previous pages where
clearwas necessary to take care of this problem). This rule keeps floating elements from overlapping or obscuring each other. Thus, floating elements are pretty safe to use, unlike positioning where it is very easy to have elements on top of each other!