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.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.
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.