How to fix this?

Question

I'm trying to understand the float and clear property and tried also the clearfix. But when I tried to code it it didn't worked. Please check the code and comment out my mistake and help me understand it more better.

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

Answer 1

https://code.sololearn.com/WiFSShjlxK55/?ref=app
your float boxes are actually floating
(check the 4 5 6 7 position in html and compare with outcome)
reason you do not feel is multiple float doesnot over lap each other.
use float when only one to float.
if intention is overlap, use position : absolute then top/left to adjust positions

Answer 2

Thank You @Speary