CODEWITHSUNDEEP
htmlcssclearfix
Xiphias
Xiphias

Reputation: 4716

Why does it work without clearfix?

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?

Upvotes: 1

Views: 217

Answers (3)

DaniP
DaniP

Reputation: 38252

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;
}

Upvotes: 2

Tosh
Tosh

Reputation: 1857

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/

Upvotes: 1

Adonis K. Kakoulidis
Adonis K. Kakoulidis

Reputation: 5133

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).

Upvotes: 2

Related Questions