When should I use floats and when should I not use them?
1 Like
When your design calls for them. 
Seriously, it’s not something that can be decided with hard-and-fast rules; you need to become familiar with how floats behave, and then judge for yourself where they are the best tool to use, and where another approach would be better.
This article should help:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats
4 Likes
floating an element is part of the style ( or presentational aspect) of a web page. So really there are, as technobear said, no hard-and fast rules. Use floats whenever they accomplish your goal and there are no better methods( knowing better methods will come simply from experience and from analyzing the INDIVIDUAL design problem…that means, a float might solve an issue in one design and not be the best solution for another design…so it’s the design itself that determines when it’s best used)
for example:
say you were trying to line 4 elements next to each other in a menu bar.
you could do it with a float, but then you would have to worry about clearing it as need it.
if you also use display: inline-block; but this will likely result in a small amount of space between elements you may or may not be ok with (there are tricks to remedy this… but that extra work).
you can also use : display table cells. which solves the spacing problem. but keep in mind that ow it element will behave as if it were a table cell which has its own quirks
if any of this are not acceptable, you can use flex-box which is very flexible ( pun) but more complex than the afore mention methods.
As you can see, the decision of what to use is more of a distilling process than a rule. Hope that has cleared things up a bit.
–r
2 Likes
akhillav,
You should take a beginning course in HTML and CSS. Most of the questions that you are asking in your posts are answered in a “first course” and explained in such a way that one can build on the information and use the HTML elements and CSS properties again in other situations. The best choice of elements and properties to use is not always simple. The right or best choice usually depends on how you have chosen to build the page. 
Please take a course in HTML and CSS. You will be glad that you did. 
Floats are a cool solutions when you generally don’t have too complicated layout inside the immediate parent element.
Because floats act on a way that floated element is kind of removed from regular parent element children flow, and it even doesn’t stretch / affect parent elements width / height like normal elements.
It affects the regular box-model and flow.
So you lose regular control, but you may gain some time on tuning if the setup isn’t too complicated.
A lot of this is best tested with experimenting on particular project.
I think that’s it, if someone notices errors, please correct me.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.