About Float property. CSS.

Question

I had added float: left rule for the article and aside elements . After that I had got extra space between the header, article and aside. Why did it happen?
https://code.sololearn.com/WWUR56kE2506/?ref=app

Answer 1

According to CSS specifications, "Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist."

If I can remind you, float is something popular back in 2009/2010; After float, it's flexbox; And after flexbox, it's grid system.

Grid system allows control over two-dimensional layout, like this:

https://code.sololearn.com/WMTibJWVjMY3/?ref=app

Try looking for some tutorials about "display : grid"

Answer 2

https://code.sololearn.com/WUpJibMkx78H/?ref=app

Answer 3

Thank you, Gordon. This is good solution but I'm wondering why float adds extra margin.