Why does " float: left; " make a bunch of keys appear all of the sudden?

I am currently at Responsive Web Design > Learn Responsive Web Design by Building a Piano > Step 17 ( https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-responsive-web-design-by-building-a-piano/step-17 )

It looked like this before I added " float: left; "

Then a bunch of keys appeared

Why does this happen after I add " float: left; ", like what is the reasoning behind this?

Thank you in advance for the help :slight_smile:

Edit: After using inspect on the browser I noticed that the elements where on top of each other going down the page but I still don`t understand why " float: left; " made them align left to right

Hello, all the keys are going straight down at this point if you change the color to blue for instance you can see this because everything is white and hidden from the editor. I hope this adds some clarity.

So " float: left; " arranges them from left to right instead of their default up down?

Thats right, although it`s just moving the first key to the left of everything.

2 Likes