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?

3 Likes

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.

5 Likes

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.

1 Like

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:

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: