Why does it work without clearfix?

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?

What did you think clearfix was for? – Alohci Dec 30 '13 at 14:15 — Alohci, Dec 30 '13 at 14:15

Adonis K. Kakoulidis · Answer 1 · 2013-12-30T14:23:06.450

2

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

edited Dec 30 '13 at 14:23

answered Dec 30 '13 at 14:14

Adonis K. Kakoulidis

4,951
6
34
43

Ah, I tricked it? If I remove `margin-left: 200px;`, it does not work anymore, even with `.clearfix`. – Xiphias Dec 30 '13 at 14:16
I did it and updated the jsfiddle of Danko, but this happens: http://jsfiddle.net/NJEa5/5/ – Xiphias Dec 30 '13 at 14:20
@Tobias you need to wrap the 2 floatted elements in a new element (`div`) and then add the class clearfix in there – Adonis K. Kakoulidis Dec 30 '13 at 14:21
Oh no, this is what I wanted to avoid, as the source of my HTML is a markdown document. I'll post a separate question. I cannot use the float-trick then ... – Xiphias Dec 30 '13 at 14:22
you don't need that wrapper element just clear the left – DaniP Dec 30 '13 at 14:23

DaniP · Accepted Answer · 2013-12-30T14:26:46.573

2

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

edited Dec 30 '13 at 14:26

answered Dec 30 '13 at 14:17

DaniP

37,813
8
65
74

You are right --- but when I do what Adonis K. said, e.g. make a `
` only 1 line, then this happens and it breaks: http://jsfiddle.net/NJEa5/5/
– Xiphias Dec 30 '13 at 14:20
Of course as i say the p tags where keeping his space and the float elements are outside that space on the container .... so in your example what you are doing is still floating to the left the elements. since p tag has not a large height the next floated element goes aside of the previous floated element... with clear http://jsfiddle.net/NJEa5/9/ – DaniP Dec 30 '13 at 14:23
Oh, oh, oh. I see. I didn't even `clear`, as a **clear** fix suggests. Thank you very much. – Xiphias Dec 30 '13 at 14:31
1

No problem mate glad to help you understand. Try to visit the link Tosh provide in his answer is a good one to begin @Tobias – DaniP Dec 30 '13 at 14:35

score 1 · Answer 3 · answered Dec 30 '13 at 14:25

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/

Why does it work without clearfix?

3 Answers3