0

I have an extremely simple snippet of HTML/CSS:

<div style="float: left; width: 180px; clear: both;">Foo</div>

<div style="float: left; width: 180px;">Bar</div>

Both divs float left, but the Foo div has clear: both. That should prevent the Bar div from floating next to it ... but it doesn't. If you throw that HTML into a browser you'll see the two divs are adjacent.

What am I failing to understand about clear?

machineghost
  • 33,529
  • 30
  • 159
  • 234
  • because Bar should clear the float before it ... we don't clear the float after but before – Temani Afif Jul 25 '18 at 00:29
  • possible duplicate of : https://stackoverflow.com/questions/8554043/what-is-a-clearfix – Temani Afif Jul 25 '18 at 00:30
  • possible duplicate of : https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use – Temani Afif Jul 25 '18 at 00:31
  • That doesn't make sense: if `clear` only clears the float in front of it, why are there `clear: left`, `clear: right`, and `clear: both` styles? – machineghost Jul 25 '18 at 00:31
  • we talk about DOM structure ... clear will clear the float elements that are *before* in the DOM .. so you need to add the clear to Bar and it will work like you want https://jsfiddle.net/2dkvo14m/ – Temani Afif Jul 25 '18 at 00:32
  • concerning left/right/both it depend on the float you want to clear .. actually you are using only `float:left` so you can use `clear:both` or simply `clear:left` – Temani Afif Jul 25 '18 at 00:33
  • Strange, I've been using floats and clears for years an always thought `clear:left` = "prevent elements from floating to the left" and `clear: right` = "prevent elements from floating to the right. But clearly I misunderstood. If you want to put something to the effect of "clear only applies to elements that came before the current element in the DOM" I'll happily accept it. – machineghost Jul 25 '18 at 00:34
  • `The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements` --> notice the use of *that precede it* https://developer.mozilla.org/en-US/docs/Web/CSS/clear – Temani Afif Jul 25 '18 at 00:36
  • and a bit down in the same doc `left Is a keyword indicating that the element is moved down to clear past left floats.` --> notice the *past left floats* – Temani Afif Jul 25 '18 at 00:38
  • So what you said is almost good but you simply missed the fact that it will not apply to the future elements but the actual one considering the previous elements – Temani Afif Jul 25 '18 at 00:40
  • Man, Stack Overflow is about answers, not comments :) – machineghost Jul 25 '18 at 00:41
  • Well I consider these as comments because the real answers are in the duplicate links ;) you will find a more detailed explanation there and also in the Doc – Temani Afif Jul 25 '18 at 00:43
  • Those other questions are hardly duplicates. Not quite getting that the `clear` property is DOM order-dependent is completely different from not understanding why a container full of floated elements has no height. – machineghost Jul 25 '18 at 02:29

1 Answers1

1

You don't want to run clear after Foo, you want to run it before the start of Bar

<div style="float: left; width: 180px;">Foo</div>

<div style="clear: both; float: left; width: 180px;">Bar</div>

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements

Garrett Bear
  • 39
  • 7
  • Thanks for the answer! Before I accept it, could you please edit it to add just a little bit more about *why* I need to move the clear to the second element? Because my question wasn't really "how do I make things float together", it was "why aren't these things floating together"? Temani Afif explained it in the comments, but those might easily be missed by someone visiting this page later on. – machineghost Jul 25 '18 at 02:43