Search code examples
csscss-floatpositioning

Cleared Element Won't Move Down?

I didn't have code to show my question but I pulled some off the w3schools website. Here's an example they give you to play with clear.

<style type="text/css">
img
{
float:left;
}
p.clear
{
clear:left;
}
</style>
</head>
<body>

<img src="http://www.w3schools.com/cssref/logocss.gif" width="95" /><p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>

My question is about using the clear property. Why is it that you can't move the cleared element DOWN any farther away from the floated element that comes before it?

Meaning, let's say I wanted there to be a couple of blank lines between the text paragraph and that image for whatever reason. Page breaks don't seem to work.

If I add relative positioning to the paragraph and give it a larger top margin, that works BUT in the example I had that I no longer have to show you anymore, it was a cleared div under a floated div, not a cleared paragraph under a floated image, and in THAT case, even relative positioning to add a margin didn't work.

What, exactly, does clear do to how the element you apply it to flows with the rest of the document? I know what clear DOES. I know it's saying which side no previous floated object can be on but what does it do to the element ITSELF? Does a cleared element get attached to the same flow as the floated elements somehow?

Solution

  • The clear property specifies which sides of the element's box cannot be adjacent to floated elements, and only does so when these floated elements are in the same block formatting conext.

    From SitePoint:

    Clearing adds space above the cleared element's top margin until it's clear of the affected floated boxes. As a result, we can’t use the top margin on the cleared element if we want a specific amount of space between it and the floated box.

    Attempting to put other elements that have not been cleared after the floated elements will essentially keep in them in the same context. This has to do simply with the way floating works.

    If you wanted to put blank lines in between the image and the paragraph, I'd add a margin-bottom to the img element:

    <style type="text/css">
img
{
  float: left;
  margin-bottom: 10px;
}
p.clear
{
  clear: both;
}
</style>
</head>
<body>

<img src="http://www.w3schools.com/cssref/logocss.gif" width="95" />
<p>This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>​​​​​​​​​​​​​​​​​​​​​​​

    I could go on, but I think this will tell you everything you need to know about floating and the CSS clear property: http://reference.sitepoint.com/css/floatclear

    And on that note, I highly recommend against w3schools, as they are known to have faulty information. See: http://w3fools.com/