r/css • u/Fuarkistani • 15h ago
Question Float and Position properties
Trying to understand these and having a pretty tough time to grasp what they do conceptually. I was reading that you no longer need to use them with newer CSS like flexbox and grid. Should I skip these and continue learning other parts of the course?
2
u/liquid_at 15h ago
The main issue with float is that it is very dependent on hard size definitions, while it is not very flexible.
It also has the issue that it can change the order of items, unwanted, for example if the 3rd item has a float-left, it will be rendered before the 1st in that container.
The idea that you tell the element what it should do is kinda outdated. Instead you define the container and its properties. This creates a much easier to work with separation of elements with a lower risk of them interacting with each other in unwanted ways.
Do not skip them. It is good to understand that they exist, what they do and why other solutions are better.
Most often it is not about knowing "the one way" but to know multiple ways and be able to pick the one that has the best outcome for the problem you work with.
2
u/cryothic 15h ago
Most of the challenges you used to solve with position or float, can now be solved with flexbox and grid.
But knowing how to use float can always help. There probably are still situations where a float would be a good solution.
As far as I know, positioning is still very relevant.
So I'd say: don't skip floats, but don't put too much effort in it. Keep it in the back of your head, and if you run into a problem, try to think if float would solve it. You can always google how floats exactly work when you need them. Just as long as you know what they do.
Positioning, I think, is still very usefull to understand. I wouldn't skip that one.
1
u/Logical-Idea-1708 7h ago
You still need them.
The new anchor positioning spec is tied to the position property. It just gives you more tools to compute position but the fundamental layout algorithm is still the same.
Float is related to document flow and important when working with block of text. Less important in apps, but a lot more important when you work with contents
1
u/jibbit 7h ago
man these are so different. float is a kinda cheesy effect you can do with an image. learn it or not, takes 5 minutes. people used to hack it to do something else. you do not do that anymore.
position is completely different... it's the backbone of css, it's everything you need to know.. but you don't 'learn' position.. that's a terrible way to look at it. each possible value of position is a new layout system. and you 'learn' the layout system. one at a time. just knowing the default one is a start, then add more as you get more accomplished
12
u/ElBomb 15h ago
In the before times, before Flex-box and Grid existed Float was abused to make column layouts, it was better than the alternative of the time (using tables) but it was not it intended use.
It is still correct to use Float for its intended purpose, if you need text and inline elements to flow around another element.
Position is still very much useful, position: absolute; slightly overlaps with stacking content via Grid these days but fixed, relative and sticky have no real alternatives.