Using clear:both

[csdude55]

I think that maybe I'm confused on the usage of clear: both.

I have a section that looks like this:

<div id="one" style="float: left; width: 160px; height: 400px"></div>

<div id="two" style="margin-left: 180px">
 <div itemscope itemtype="http://schema.org/Product">
  <div id="three" style="float: left; width: 75px; height: 75px; overflow: hidden">example</div>
  <div style="margin-left: 85px">
   <p>Lorem ipsum, blah blah blah...</p>
   <p style="float: right">sample</p>
   <div style="clear: both"></div>
  </div>
  <div style="clear: both"></div>
 </div>

 <div itemscope itemtype="http://schema.org/Product">
  <div id="four" style="float: left; width: 75px; height: 75px; overflow: hidden">example</div>
  <div style="margin-left: 85px">
   <p>Lorem ipsum, blah blah blah...</p>
   <p style="float: right">sample</p>
   <div style="clear: both"></div>
  </div>
  <div style="clear: both"></div>
 </div>
 <div class="clear: both"></div>
</div>

<div class="clear: both"></div>

To me, that makes sense... after I'm done with the floating sections and want the floating to stop, I add in a clear: both.

But it doesn't work like I expected. What happens is that id=two stretches it's height to match that of id=one when it's only expected to be around 100px, pushing id=four 400px down the page.

When I remove the two clear: both styles that are nested within id=two and id=four, though, the problem goes away and the layout looks like I expected.

So what's the correct way for me to be doing this? Was I originally correct in my usage of clear: both and the layout was messing up for some other reason? Or have I been doing it wrong all along?

[NickMNS]

I'm not sure what exactly your are trying to achieve.

But the clear:both is working as it should. When you add the clear:both, it is like drawing a line across the page. From that point on the next floated objects will start at that line. Removing the clear:both will allow the following div to be floated directly after the last floated element. In my experience float has always been a little wonky, specially when you are floating many divs.

If you are trying to position multiple boxes you may want to take a look at flexbox (it is not supported ie<11). [w3schools.com...]

[not2easy]

Both div=1 and div=2 are floated so if they fit on one line, they will be on one line. The div=1 creates a box that is 400px height and the div floated to its left has no assigned height. The float is cleared before div=4 so it starts over on a new line. Floats are not unpredictable, but they require planning and can seem to behave erratically in responsive layouts. (Compared to what it may seem they should do). Either flex-box or border-box layouts are more intuitive.

[csdude55]

Let's see if I can draw this out... if not, I'll try to show an image later.

This is what I was wanting:

| div=1 | | div = 3 |
|      | |______|
|      | | div = 4 |
|      | |______|
|      |

(where 3 and 4 are inside of a container, 2)

But this is what I was getting:

| div=1 | | div = 3 |
|      | |      |
|      | |      |
|      | |      |
|      | |______|
       | div = 4 |
       |______|

Even though removing the children clear: both tags seemed to fix the problem, I don't know if that was the right fix, or a workaround. Without them, how does the system know when to stop floating the elements inside of 3 and 4?

[lucy24]

how does the system know when to stop floating the elements inside of 3 and 4?

Floating stops when the element stops. If your floated element might happen to be larger than the adjoining non-floated element--for example a twelve-sentence sidebar alongside a two-sentence paragraph, and you don't want the next paragraph to start before the sidebar is done--it sometimes helps to cheat. After all your interlocking floaty business, stick in a

<p class = "allclear">&nbsp;</p>

where the CSS says

p.allclear {line-height: 1px; clear: both; margin: 0; padding: 0;}

It is, like I said, cheating. But why not, if it's the easiest way to achieve what you want.

But--tangentially--make sure that floating is what you actually want. If you want two elements to display side by side, {display: table-cell;} or {display: inline-block;} may work better.

[ansaripk]

When you float any element, browser doesn't count the floating element in document's vertical space so when you float any element, you should use clear:both in next block level element so previously floated element's container can take vertical space for floated elements.