Floats are fun

Float in CSS is one of those things I never got around to learning. When I seriously started working with web design, flex-box was already widely available. In my mind, float remained that weird hack bootstrap did to have columns.

What even are floats?

You know when you are reading some Wikipedia article and there is that info-box on the right, embedded in the text. It’s not a separate column on the side, the text wraps around it.

If I write some more text here to fill out the paragraph it should eventually start wrapping around the image on the right.

I’m very happy to be blessed with our savior flex-box for all the horizontal layout needs, it really is a better tool for it. I’m also a bit sad because I never got to know float and it seems to have grown out of fashion in “modern” web design.

My new years resolution is to bring float back! Not for any complex layout needs, but for simple inline elements, like images, that look nice when pushed to the side.

How do i use the thing?

When you have an element you want to push to the side you simply add float

.right {
  float: right;
}

One problem you might notice is that while text wraps around the floating image, other elements (like the code block above) does not move out of the way. One way to solve this is to “clear” the float. This means the code block will be pushed below the image, even if there is space for more text.

.clear {
  clear: both; /* left, right, both */
}

One more problem you might face is that a floating element does not contribute to the parent containers height. A box with only floating elements will collapse to a height of 0. To solve this you can mark the parent as a flow-root.

main {
  display: flow-root;
}

That’s all I got on floats for now, thanks for reading my ramblings.