Why clear property is not worked for inline elements?

HTML-CSS
1

HTML:

<body>
    <div class="container">
      <img width="200px" style="border: 2px solid;" src="../HTML/FCC Beta Curriculum/Sources/Naruto.jpg" alt="Placeholder Image">
      <p>This is an example of text flowing around a floated image.</p>
    </div>
  </body>

CSS Fragment 1:

.container {
  border: 1px solid black;
}

img {
  float: left;
  margin-right: 20px;
}

/* Clearfix CSS */
.container::after {
  content: "";
  display:inline;
  clear: both;
}

CSS Fragment 2:

.container {
  border: 1px solid black;
}

img {
  float: left;
  margin-right: 20px;
}

/* Clearfix CSS */
.container::after {
  content: "";
  display: block;
  clear: both;
}

Preview for CSS Fragment 1:

Preview for CSS Fragment 1
Preview for CSS Fragment 11174Ă—416 48.5 KB

Preview for CSS Fragment 2:

Preview for CSS Fragment 2
Preview for CSS Fragment 21175Ă—374 51.1 KB

Question:

Why clear property is not worked for inline elements?

Why I ask this:

After checking and trying to understand the concepts of float property and clear property.My understanding of block elements and inline elements seems to have a conflict with these two new concepts.

  • The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page.-From MDN
  • The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements..-From MDN
  • The main difference between block elements and inline elements is that block elements take up the whole width space of their parent elements by default,regardless of the content within it,while inline elements take up the space of their content only.-My understanding

My thought:

Originally,Both block ::after elements and inline ::after elements without clear property will be added into the .container div like these two pics below due to the influece of the floating img.

1180Ă—413 56.4 KB

1179Ă—394 57.5 KB

Since the clear property can do something like cleaing the effect of floating elements on other elements.

Then,I think,after adding the clear property, both block ::after elements and inline ::after elements suppose to be moving like this and the border of the .container div will wrap the floating img into it.
(I just use drawing tool to show my thought,actually i did not set clear:both with these two pics below).

display:block thought
display:block thought1177Ă—398 74.5 KB

display:inline thought
display:inline thought1180Ă—401 62.2 KB

But when I really add the clear property to both block ::after elements and inline ::after elements,what I get are these.:down_arrow:

display:block result
display:block result1178Ă—434 76.3 KB

display:inline
display:inline1175Ă—397 59 KB

I get confused about the results…

Pre-thanks for your reply and correcting!!!
If I do not express my idea clearly,Please tell me in the comment area!

Course Source:
What Are Common Use Cases for Using Floats, and How Do They Work?

2

Happy spec diving. The implementation details explain why.

Values other than none potentially introduce clearance. Clearance inhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float.

Computing the clearance of an element on which clear is set is done by first determining the hypothetical position of the element’s top border edge. This position is where the actual top border edge would have been if the element’s clear property had been none.

If this hypothetical position of the element’s top border edge is not past the relevant floats, then clearance is introduced, and margins collapse according to the rules in 8.3.1.

Also, as noted, this wasn’t always the case.

Note. This property applied to all elements in CSS1. Implementations may therefore have supported this property on all elements. In CSS2 (1998) and CSS 2 the clear property only applies to block-level elements. Therefore authors should only use this property on block-level elements. If an implementation does support clear on inline elements, rather than setting a clearance as explained above, the implementation should force a break and effectively insert one or more empty line boxes (or shifting the new line box downward as described in section 9.5) to move the top of the cleared inline’s line box to below the respective floating box(es).

1 Like
3

Thank you very much,I will try to understand. :thinking:

4

My understand: The reason the clear property doesn’t work on inline elements is because the property is specifically designed to control the behavior of block-level elements in the context of floats. Inline elements (like <span>, <a>, <strong>, <p>) do not participate in block layout. To make clear take effect, you need to turn your inline element into a block-level element or inline-block. Hope this will answer your question. Happy Coding!

5

Thank you very much,I will try to understand. :thinking:

6

Actually I`ve tried inline-block,but it does not work(act like block-level elements)

7

Thanks for pointing that out! You’re right — even though inline-block has some block-like features (like accepting width/height), it still flows inline and doesn’t participate in the block formatting context needed for clear to work. To truly clear a float, the element needs to be display: block. So try switching from inline-block to block, and clear: both should then behave as expected. Appreciate the follow-up!

8

Can you share your understanding of “clearance”? :thinking:

9

note that p is a block element