I’m currently learning web development. As a way to reinforce the things I have learned or am learning, I will try to write a blog post about a topic. Today, I’m going to talk about the float and clear properties. Floating elements can be frustrating if you don’t understand the behavior. I know this well.
While I’m still getting used to using float values, I think my explanation–as simple as it is–will help me and you finally get started on a path of taming a beast known as CSS.
Students at the School of Developers Learn About Float and Clear!
The float property in CSS is like a special way of seating students on a school’s bleachers. Pretend that at this school, seating is organized vertically and on the far left side. Each student gets an entire row. There is no sharing—even though each row can fit plenty of students—and no skipping of rows. This system is considered the normal flow of organized seating.
Now, imagine a fun and wacky teacher decided to seat students based on the colored square randomly assigned to them. Each color represents a float value: red means sit on the left, yellow means sit on the right, and blue means always follow the normal flow because its float value is none. There is another float value, inherit, but there are no parents at the school so the teacher did not make a colored square for them.
The green squares were given to the recess teachers to manage the students. Green squares do not have float values. Instead, green means clear. The clear property has four values: left, right, both, and none which will affect the float values as you will see in a moment.
Pretend a row can hold only six students. When there is no more room on a row, the next student must move down a row, except for blue. Blue always sits on the left and any color after it in the queue must move down a row because according to blue, the normal flow is the rule.
Sometimes, red, yellow, or both will sit before blue. When it is blue’s turn to sit, that student will take a seat as usual, ignoring red and yellow. When this happens, blue will share a row with yellow but will be hidden behind red. When the green recess teachers and their clear values enter the queue, the behavior of the students change. Let’s begin.
Imagine that the first student in the queue is red and the second is yellow. Red will sit on the far left and yellow will sit on the far right of Row 1. The third is blue, but since blue has a float value of none, the student will take a seat on Row 1 according to the normal flow. This means that blue will sit in the very same spot as red and will be hidden.
The next student, which is yellow, will take a seat on Row 2 directly beneath the other yellow on Row 1. Next is blue. Blue sits on Row 2, oblivious to yellow and directly beneath the other blue student hidden behind red.
The next row for seating is Row 3 and red sits first. After red is another red; both red students sit cuddled together. Next, yellow takes a seat on the far right side.
The recess teacher notices blue is next in line. Because blue students follow the normal flow, the student’s behavior would be to take a seat directly behind the red student on Row 3 and disappear from view. Not wanting that to happen, the recess teacher instead sits before blue. With a clear value of both, the teacher takes up the entire empty row beneath the red and yellow students. Now that it is blue’s turn, the student sits happily alone on Row 5.
In the queue, there are three red students and four yellow students. Since each bleacher row only fits six students, the last of the four yellow students will have to move down to Row 7 and directly beneath a yellow student on Row 6. After this yellow student is the very last color in the line. That color is blue. Where will this blue student sit?
You may have thought the blue student will sit on the far left side on Row 7. Instead, blue takes a seat on Row 6 where the three reds and four yellows sit and is now completely hidden behind the first red! Remember, blue always follows the normal flow.
Feeling sad for this student blocked by red, the green recess teacher decides to give the blue student a clear property with a left value. This student now owns a blue-green square and moves down to Row 7 directly beneath red, which also has a left value. This student is now visible.
And that’s it, for now. Hopefully this light introduction about the float and clear properties helped a little. For meatier definitions, check out MDN’s pages on CSS positioning.
azureowldeveloper 