Nice article! It is very important to deeply understand what the different CSS properties are for, thanks for sharing it!! However I think it must be pointed out that Floats are not for layout.
The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).
For that purpose we have CSS Flexbox and CSS Grid now. Floats are bad for layout purposes, but are great for what they are meant to, and I quote this blog post:
floats in themselves are not evil or bad — IF they are used for what they were supposed to be used for in the first place, things like an image floating to the left with the text flowing around it.
They are great for text and content formatting, Jen Simmons explain this very well and put's in an extremely good example of how floats are great for things like CSS Shapes in this video.
Nice article! It is very important to deeply understand what the different CSS properties are for, thanks for sharing it!! However I think it must be pointed out that Floats are not for layout.
CSS float MDN
For that purpose we have CSS Flexbox and CSS Grid now. Floats are bad for layout purposes, but are great for what they are meant to, and I quote this blog post:
Floats are Bad! Wait, they aren’t?
They are great for text and content formatting, Jen Simmons explain this very well and put's in an extremely good example of how floats are great for things like CSS Shapes in this video.
Obliterate Boxiness with CSS Shapes
And implicitly shows a great example of this at the 0:30s mark.
I really recommend everyone to watch her videos, they are very good at explaining several concepts.