Positioning elements to the left or right of their containers using the CSS float attribute.
Adding float: left or float: right to an element pushes it as far as possible to the chosen side of the document flow. Multiple elements floated in the same direction will stack on top of each other. Floating is extremely useful for arranging elements on the page, but it is also liable to create several interesting layout problems. The clear property is a related attribute sometimes used to solve floating issues.
Floating to the Right - The Backwards Effect
When floating multiple elements to the right side of the document, you will have to list them in reverse order that you want them to appear. This occurs because the first element found in the document gets floated to the right first. The next one which gets floated to the right gets stacked on top of the previous element, stacking to the left. Each element after that stacks to the left on top of the others.
The backwards effect also partially extends to elements which are floated to the right on the same line with elements floated to the left. Any elements you want to float directly to the right of left-floated elements should be placed before those floated to the left. Otherwise, the right-floated elements may end up on the line below.
Removal from the Flow of the Document
One of the major issues developers tend to have is that floated elements get removed from the flow of the document. This means they do not take up any space at all, both vertically, and horizontally. Other elements will expand behind them and only text will wrap around them. Most notably, you will see floated content expanding down past the edge of its parent container. Take for example, a green container with a padding of 20px, which contains a red container that is floated to the left:
Since the floated element does not actually take up any space, the parent container has a calculated height of 0, plus the 40px of padding (top and bottom), which creates this adverse effect. Fixing this is simple, though. You can either add overflow: hidden to the parent container (which will work in most cases) or use a clear fix on the parent element (for CSS3-compatible browsers only).
.parent::after {
content: "";
clear: both;
display: block;
font-size: 0;
}
See the pseudo-element tag wiki for more information after the ::after selector.
Clearing Floated Elements
You can clear elements which are floated to the left, right, or both sides. Keep in mind that clearing floated elements will clear all elements to the specified sides (s). You cannot only clear one or two elements at a time with this property. Also, you should keep in mind that it will only affect those elements which are actually floated in that direction. In the case where an element floated to the left is stacked between two other elements floated to the left, you cannot apply a clear: right to that element to clear the left-floated element which is stacked to its right.
References
- W3C: CSS 2.1 Specification: 9.5 Floats
- W3C: CSS basic box model: 10. Floating boxes
- W3CWiki: Floats and clearing
