Member Avatar for kutchbhi

This should be simple , but the explanations in books and tutorials don't make sense to me.
what exactly does the clear property do?
I want to know exactly ,EXACTLY what it does.
Take for example this code:

p.one {

width: 200px ;
float: left ;
clear:both;
}
p.two {

width: 200px ;
float: left ;
}
div.goaway {
    border : 2px solid blue ;
    }
<p class="one">dfgspara3 para3 </p>

<p class="two">para3 para3  </p>

<div class="goaway">
<form id="crazy" action="">
    <input id="great" type="text">
    <input type="checkbox">
    <a href="#">Some link</a>
    <input type="text"> <input type="text"> <input type="text">
    <a href="#">Some link</a>
</form>
</div>

Applying clear:both to p.one has no effect whatsoever. Why ?
Please explain.

Thanks

  • 5 Contributors
  • 4 Replies
  • 133 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Philippe.Lahaie

Dani AI

Generated

Short, exact definition: the CSS clear property forces an element’s top margin edge to be pushed down until it no longer intersects any earlier floats on the side(s) named (left, right, or both). In other words, clear only reacts to floats that appear before that element in the source order and in the same formatting context — it does not affect floats that come after it.

This explains the original example: ’s p.one has clear:both but it appears before p.two in the HTML, so there are no earlier floats for it to clear. pointed this out correctly. and also gave the right high‑level idea: clearing prevents following content from wrapping around preceding floats.

Practical notes and common patterns:

  • clear is normally applied to the block that must start below floats (for example, a footer or a following div), not to the earlier floated element itself.

  • If floated children make a parent collapse, use a clearfix so the parent contains its floats. A common clearfix:

    .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

  • Alternative for containing floats: set the parent to create a new BFC (e.g., overflow: auto or display: flow-root in modern layouts).

Troubleshooting checklist when clear seems to have no effect:

  • Confirm the floats to be cleared actually precede the element in the DOM.
  • Check the element’s display/position: some positioning or display modes change how floats interact.
  • Verify the floats are in the same block formatting context.
  • Use browser devtools to inspect computed styles and box edges.

For the spec and extra details, see the authoritative reference: MDN — clear.

Recommended Answers

All 4 Replies

Member Avatar for breakzzzz20

your in a php section,

Member Avatar for JorgeM

Not sure what you are trying to accomplish with the clear. Can you elaborate?

Normally, you can use the clear property to have your HTML element either clear left, right, or both. For example, if you had an image above the paragraph that had the float set to left, without a clear, your paragraph would wrap around the picture. if you want the paragraph to clear it, you could set the paragraph to clear:right. If you had two elements that were floating above the paragraph and you need to clear them both, then you would set the paragrpah to clear:both.

Member Avatar for drjohn

When you float items, say an image or div, the next item below it, if another image or div, can catch on to the lower edge and get stuck, sort of bumping into it instead of going past it; or as mentioned above, in the case of text it can wrap round the object then below it once all the space to the side is filled with text.

clear effectively says do the equivalent of start a "guarenteed new line" below the lowest edge of the floated object. The clear: left or clear: right bit means only do this to things floated left or right respectively. clear: both means which ever float there is, clear it, get underneath it.

Member Avatar for Philippe.Lahaie

in your example, p one does not clear p two simply because it comes before p two in the html.

whenever you float something, it gets detached from the default "block" objects. Clear allows you to control the position of floating objects. i know this sounds obscur but take your 2 paragraph example, since they are floating they will display "inline" instead of "block. so depending on their respective width, and the width of their parent container, they could be next to eachother, if there is enough room, if there isnt, it would float to the next position where there is enough room for it. Clear allows you to tell an object to go past any (previously added) floated elements, wheter there is or isnt space for it on the same line.

w3 schools would probly explain it even better than i would though, try reading these two pages :
floating
clear

Edited by Philippe.Lahaie because: typo
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.