CSS Floats Explained in Five Questions

By . in Coding. Updated on .

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.

  1. Which elements don’t float?
  2. What happens to an element when it floats?
  3. What happens to the siblings of "Floats"?
  4. What happens to a parent of a "Float"?
  5. 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.

float below others

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.

floating span
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.

floating div

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, 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 overflow:hidden.

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 overflow:hidden.

4. What happens to a parent of a "Float"?

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.

5. How to clear "Floats"?

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 both. This clear attribute can be used on a sibling, empty div or on pseudo element as per your convenient.

Summary

  1. Absolute/Fixed elements won’t float.
  2. A "Float" doesn’t go above the element before it in the code.
  3. If there is not enough space in the container, a "Float" will be pushed down.
  4. All "Floats" are made into block-level elements.
  5. If width is not specified on a "Float", it’ll shrink to fit the content.
  6. The later siblings of a "Float" will either surround them (inline & text) or wrap them (blocks).
  7. To stop an element from wrapping a "Float", use overflow:hidden.
  8. The parents of a "Float"s would not increase its height to fit the float.
  9. To make a parent increase its height as per the "Float", use overflow:hidden (or create an empty sibling with clear after it).
  10. To prevent an element being near any "Float" use the clear attribute.
WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail