To float or not to float... your layout [closed]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 9 years ago.

Improve this question

I recently got into the discussion that float can be used in layout design, but should not be used for layout design. To specify, it can be used to float certain elements, but not position entire semantic sections and containers with respect to each other. Although the individual cited a couple sources (source 1, source 2) that could lead one to believe that float is hard to work with in some layout situations, I don't see any evidence linking to a specification to support the claim that it should not be used for layout.

If you can use float to position small portions of your layout, why not extend this technique for the big picture? i.e. the whole layout.

I know there are new techniques coming out like the flexible box layout and some others, but they are still drafts and are not supported currently. inline-block seems like a good candidate but sometimes you just need that float fix, and there are hacks to get this to work in older browsers as well.

So I guess my question is... is it true that float should not be used for layout? Is it a non-semantic or outdated technique nowadays, akin to the table layouts of yesteryear?

Answer 1

Semantics in the jargon-sense are simply a way of formatting HTML so that search engines can parse the data with some sort of context. Semantics in a broader sense is how you code your site so that other developers can pull meaning from your coding style.

Floats are simply a tool in your tool belt and have no semantic context whatsoever. Additionally, floats are so widely used that it would be incongruous to say that they shouldn't be used. There are plenty of frameworks that rely on floats as part of their integral structure (Bootstrap, Gumby, Foundation, Skeleton, etc).

I can speak, however, to the difficulty of using floats. For someone just starting with CSS it can be hard to understand what exactly is going on with floats. In addition, you have clearing and in-flow and out-of-flow elements. It can certainly be confusing. However, floats are absolutely a cornerstone of the CSS specification and I couldn't imagine doing my job without them.

Hope this helps!

Answer 2

Bootstrap is heavily dependent on floats, and its probably the most used CSS library. That being said, for every fan of bootstrap, theres someone there to say that its not best practice.

Do what works for you