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

HTML-CSS
1

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; "

image
image1910×1100 10.9 KB

Then a bunch of keys appeared

image
image2316×1154 15.1 KB

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

2

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.

3

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

4

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

2 Likes
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.