FAQ: CSS Display and Positioning - Clear

This community-built FAQ covers the “Clear” exercise from the lesson “CSS Display and Positioning”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Clear

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

In this example, why did the .question divs “bump” into the .answer divs in the first place? If div is a block-level element by default, and we didn’t specify any display properties for div or .question (we only specified display: inline-block for .answer divs, of which .question is the parent element), then wouldn’t each new .question div start on a new line by default?

html would be .question container element, so wouldn’t .question always span the entire width of html?


I think it’s because the <div>s with class="question" are parent elements not just to the <h4> and <h2> elements which form the questions (question header and question text, respectively), but also to the <div>s with class="answer".

Having read @mtf’s post from the previous exercise and also https://developer.mozilla.org/en-US/docs/Web/CSS/float, I’ve realised the following:

The declaration float: left;, as well as sending an element to the left of the space its parent occupies, also makes the other elements within that same parent (effectively its “brothers and sisters”) wrap/float around it. I think this is the “bumping into” action that the lesson describes, which we can then counteract by using the clear property.

I found the visual examples given in the demo at the top of https://developer.mozilla.org/en-US/docs/Web/CSS/float particularly helpful in grasping how the neighbouring elements interact when the float property is used to style one/some of them i.e. there is a knock-on effect and all of them are affected.

In my humble opinion, I don’t think exercises 10 and 11 (Float and Clear) of this lesson are particularly helpful in how they explain what is actually happening when we use the float property, and I think the examples could be much clearer. I was particularly confused until I read @mtf’s post and the MDN web doc (both of which I’ve linked to above).

I hope that helps! :smiley: …and that some of the experts/moderators will chip in with any further clarification, correction, or confirmation of this.


Agreed – why was float introduced to us in a lesson where it does nothing but make a shambles of the demo page?

Wouldn’t it make more sense to teach us float in the context of a demo page where it was actually necessary? E.G. An author’s picture floated to the left of the text of an article they wrote.


Thank you jon_morris! Your post (particularly the link to the MDN article with the interactive example) was THE thing I needed to understand this. I agree the exercises on this site were not exactly the clearest at explaining the float concept.

The key takeaway I got from this is that a div is block level by default, but using a float makes it in-line, so other elements (if they fit) can ‘wrap around’ them.

For anyone who is having trouble, I highly recommend the interactive example on the MDN page!

I checked https://developer.mozilla.org/en-US/docs/Web/CSS/float, and I don’t think that using the float property makes a default block-level element inline. As you can see from the text and table just below the demo at the top, float uses a block layout, and actually computes inline and inline-block elements as block-level elements. I think the key here is setting the width of our block-level elements to less than the full width of the page, and then “floating” them. Any other elements within the same parent will then wrap around them (“if they fit”, as you say).

What do you think? :thinking:

Glad the link and interactive example helped! :+1: :smiley:

1 Like

Yes, I think your explanation is more accurate than mine. They are block, but behave like chunks of inline in the sense that more than one block can fit in one line (if they fit…lol).

1 Like

I find it funny how in the end after learning float and clear, they’re like “oh and on second thought, remove these.” Very clever, Codecademy, very clever. :slight_smile:


Why I can’t combine position: absolute or fixed and float property?

When I combine position: absolute/fixed and float happens this:

But when I put position: static/relative and float, the float works well:



clear:left; in the .question selector fixed the problem of Question bumping into the answers of Question 1.

But when I go to the .answer selector and apply clear:right; it does not do the same thing.

Why is that?

1 Like

I don’t know…I think the only point of this lesson was to intentionally mess up a web-page then walk the student through un-messing it up via CSS so that the student could learn interactively how the CSS applies visually to actual ‘content’ displayed in the viewport/webpage. In the end, the unnecassary top most element was still a mess. I re-wrote the CSS to make it not cover up the stuff below it when the user/visitor opened it their browser just to tidy it up before I moved on my with my educational experience here at Codecademy. I did learn how those annoying advertisements and click-bait videos that appear on various web-sites get put in my face to close so I can get to the content/information I was looking for in the first place got there. That was educational.

1 Like

My question exactly!

div {
  width: 200px;
  float: left;

div.special {
  clear: left;

“In the example above, all <div> s on the page are floated to the left side. The element with class special did not move all the way to the left because a taller <div> blocked its positioning. By setting its clear property to left , the special <div> will be moved all the way to the left side of the page.”

That’s from the description of exercise 11. What does it mean that an element is taller? The wording is just so confusing - so the element moves, but then it doesn’t, but really it does?

1 Like

The float property only works on elements with a display property of static or relative. I’m guessing it’s because an element with a display of absolute or fixed is taken out of the normal flow and is ignored by other elements. This is why inline/text elements don’t actually wrap around it

1 Like

So basically, the float property is used to allow text to wrap around elements. The floated elements can either be on the far right or the far left of its parent container. The clear property is used to make sure an element will not wrap or go under a floated element.

Something most people don’t know about floated elements is that its siblings don’t actually wrap around them. Think of floated elements as clouds - they fly up high. Other elements can then go under the clouds. That’s what happens! Text, on the other hand, doesn’t go under floated elements. Instead, it wraps around floated elements. Something to keep in mind is that even the <p> element goes under floated elements but its textual content wraps around them

Here is a REPL.IT if they want to further understand this concept: https://repl.it/@samyadel/float-and-clear#style.css

From the image above, we can see that the <p> element is, in fact, going under the floated <div> but the actual content of the <p> element is wrapping around the <div>

Note: The floated <div> in the image above is blue with an opacity of 0.2

This might be helpful