CSS Floats Explained in Five Questions
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. Which elements don’t float? What happens to an element when it floats? What happens to the siblings of “Floats”? What happens to a parent of a “Float”? How do you clear “Floats”? For readers who addopt the TL;dr approach to life, there’s a summary near the end of the post. 1. Which elements don’t float? 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:absolute or position:fixed and apply changes accordingly. 2. What happens to an element when it floats? 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: An inline element will turn into a block-level element when floated 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. A block element of unspecified width will shrink to fit its content when floated 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. 3. What happens to The Siblings of “Floats”? 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, » Read More
Like to keep reading?
This article first appeared on hongkiat.com. If you'd like to keep reading, follow the white rabbit.