FAQ: CSS Display and Positioning - Clear


#1

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!


#2

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

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.