DEV Community

Discussion on: Here's how floats work in CSS

Collapse
tchaflich profile image
Thomas C. Haflich Author

Floats are in general pretty slow, because of all the calculation the browser has to do to position not only the float but all the stuff that comes after it. For medium to large scale layout, floats are pretty outdated simply because there are options that are easier to implement and that produce better results.

I'll still use them here or there for the little things - they're still not bad for, say, placing pull-quotes mid-paragraph. (And if you have enough of those that your rendering is noticeably slower, you have too many anyway.)

Since floats were so often used for layout in the past, I think we've gotten the idea that that's all they can do, but that's not even what they were really intended for.

I've definitely seen their overuse lead to slowdowns, though. I've had a page rendering a couple hundred components at once that was absolutely chugging, and it turns out it was relying heavily on float:right and overflow:hidden to position an element on the right-hand side. Switching to position:absolute and margin:right improved performance by... I don't recall exactly, but it was somewhere in the hundreds of milliseconds of reduction in rendering time.

Collapse
ben profile image
Ben Halpern

Great post + discussion here. Thanks a lot folks. I feel like this is a solid canonical resource for anyone trying to think through the right choices here.