CSS "Floats" (floating elements) are simple to use but once used, the effect it has on the elements around it sometimes get unpredictable. If you have ever come across the problems of vanishing nearby elements or floats that poke out like a sore thumb, worry no more.
This post covers five basic questions that will help you become an expert at floating elements.
For readers who addopt the TL;dr approach to life, there’s a summary near the end of the post.
An absolute or fixed positioned element won’t float. So the next time you encounter a float that isn’t working, check if it is in
position:fixed and apply changes accordingly.
When an element is tagged "float" it runs to either the left or the right basically until it hits the wall of its container element. Alternatively, it will run until it hits another floating element that has already hit the same wall. They’ll keep piling up side by side until the space runs out, and newer incoming ones will be moved down.
Floating elements also won’t go above the elements before it in the code, something you need to consider before coding a “Float” after an element to the side of which you want to float it.
Here are two more things that happen to a floating element depending on what type of element is being kept floating:
Ever wondered why suddenly you’re able to assign height & width to a floating
span? That’s because all the elements when floated will get the value
block for its
display attribute (
inline-table will get
table) making them block level elements.
Usually, when you don’t specify width to a block element, its width is the default 100%. But when floated, that’s no more the case; the block element’s box will shrink until its contents remain visible.
When you decide to float an element among a bunch of elements don’t worry about how it’s going to behave, its behavior will be predictable and will either move left or right. What you should really be thinking about is how the siblings after it are going to behave.
"Floats" have the most caring and obedient later siblings in the entire world. They’ll do everything in their power to accommodate a floating element.
The text and inline elements will simply make way for the "Floats" and will surround the "Float" when it’s in position.
The block elements will go a step further and will wrap themselves around a "Float" generously, even if it means kicking out their own child elements to make space for the "Float".
Let’s check this out in an experiment. Below are a blue box and after it is a red box of the same size with some child elements.
Now, let’s float the blue box, and see what happens to the red box and its children.
Everything will be fine once the red box stops embracing the blue box and for that you can use
When you add
overflow:hidden to an element that has been wrapping a float, it’ll stop doing so. See below how the red box behaves with
Parents don’t care much about their "Float" children, except that they shouldn’t go out of their left or right boundaries.
Typically a block element of unspecified height increases its height to accommodate its child elements, but that isn’t the case for "Float" children. If a "Float’s" size increases, its parent won’t increase its height accordingly. This again can be solved by using
overflow:hidden in the parent.
I’ve already mentioned using
overflow:hidden to make a parent height-wise accommodate a floating child while creating the right space for other elements after the "Float" and to stop siblings from wrapping "Floats.
And that’s how you make an element live near a "Float" with no compromises.
There’s another method where the elements won’t even be anywhere near their "Float" siblings. By using the
clear attribute you can make an element free from being near a "Float".
clear: left; clear: right; clear: both;
left value clears all "Floats" to the left of the element, and vice versa for
right, and on both sides for
clear attribute can be used on a sibling, empty div or on pseudo element as per your convenient.
overflow:hidden(or create an empty sibling with