Why does it work without clearfix?

StackOverflow https://stackoverflow.com/questions/20841251

  •  22-09-2022
  •  | 
  •  

Question

I thought I understood what the clearfix is for. But it works as desired without clearfix. Why is that?

This is my HTML:

<body>
<div class="clearfix">
    <h1>Title</h1>
    <h2>Headline 1 with a very long title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h2>Headline 1 with a very long title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h2>Headline 2</h2>
        <ul>
            <li>bullet 1</li>
            <li>bullet 2</li>
        </ul>
    </div>
</body>

And CSS:

* {
    /* basic resets */
    margin: 0px;
    padding: 0px;
    /* font stuff */
    font-family: Cambria;
    font-size: 18px;
    line-height: 24px;
    border-color: black;
}

body, html {
    margin: auto;
    max-width: 700px;
}

p {
    margin-left: 200px;
    margin-bottom: 18px;
}

h1 {
    margin-left: 200px;
}

h2 {
    max-width: 150px;
    margin-left: 50px;
    margin-left: 0px;
    float: left;
}

ul {
    margin-left: 200px;
}

/*.clearfix {
    overflow: auto;
    zoom: 1;
}*/

This is what I get (it's what I wanted):

enter image description here Why is everything fine without the clearfix?

Was it helpful?

Solution

The clearfix works to keep the space of floated elements.

Since you already have other elements like <p> tags without float property they reserve the space.

Check here http://jsfiddle.net/NJEa5/2/

I remove the last ul element, then the floated element does not occupy space within the container.

But with the clearfix it keeps the space http://jsfiddle.net/NJEa5/3/

Then if you want to preserve those elements on the left even with short p tags you can clear the previous float : http://jsfiddle.net/NJEa5/10/

h2 {
  float: left;
  clear:left;
}

OTHER TIPS

Indeed, it seems to work but all you do is avoid the floated element by using margin-left: 200px; (also the paragraph is not floated, the clearfix clears floats after all). The floated element is not cleared though. The floated element is now in it's own Block Formatting Context while the paragraph with the margin-left is in the main context.

You will notice it breaking if you go to any paragraph and make it's text 1-2 characters (1 line).

Clearfix is used to determine the height of an element that contains floated elements. Elements that float don't pass on the height to it's parent element, so you'll find yourself in difficulty with margins etc. for the parent element. In your example the clearfix is not doing anything since you don't have any elements below the clearfixed element. I think you are confusing the clearfix trick with the clear property.

Check out css tricks on floats for more info: http://css-tricks.com/all-about-floats/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top