Float with no clearfix - why doesn't the next element go under the floated elements?

Hi, this is my first post. I was experimenting with floats, and wanted to understand the “clearfix hack”, the one in which you use .element::after{}. I didn’t understand its purpose. On the net I read that, because a div adapts its height to its content, it would collapse when only float elements were inside of it. So, I created a .red div (with red background and borders) and put three floating columns inside (width of 33.33%, backgrounds of green, blue and yellow, and filled with some text). After that, I created a new .orange div after this .red div and put an anchor tag. The div has a background color of orange and the anchor a background of saddlebrown, just to see where is everything.

As far as I could find on the internet, without some .red::after{} style with the properties of content=“”; display: table; and clear: both;, there’s going to be trouble. Because the floated elements are taken out of the flow of the page, and therefore other elements will slip underneath them, as if they didn’t exist.

I can obviously tell that the .orange div went underneath the floating elements of the .red div, because with my explorer (Chrome) I see that the orange background goes behind them and almost reaches the .red collapsed borders. But then, these floating elements don’t go over the anchor element. It just goes down the all the way below them and fits nicely.

This is what makes me wonder, “why do I need the clearflix?”. Sure, I know that the content:“”; will create an empty string, which will be displayed as a table to have a dimension and, after being cleared on both sides, will go down just after the last float element. I know this will enable me to place borders correctly and will correct this error in which the .orange background went underneath something. But what about the content? I’ve seen dozens of examples of the clearfix hack, in which they said it was to stop the overflown content to overlap other elements. Why does the anchor tag react that way? From a logical point of view, I understand it should slip underneath the columns and the whole .orange element should have a height of the anchor plus any padding or margin.

I’m leaving my code here.
Thank you in advance!

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .red {
                background-color: red;
                border: 5px solid purple;
            }

            .green {
                background-color: green;
                width:33.33%;
                float:left;
            }

            .blue {
                background-color: blue;
                width:33.33%;
                float:left;
            }

            .yellow {
                background-color: yellow;
                width:33.33%;
                float:left;
            }

            .orange {
                background-color: orange;
            }

            a {
                background-color: saddlebrown;
                clear:none;
            }
        </style>
    </head>
    <body>
        <div class="red">
            <div class="green">
                <h2>Column 1</h2>
                <p>First column inside first div</p></div>
            <div class="blue">
                <h2>Column 2</h2>
                <p>Second column inside first div</p></div>
            <div class="yellow">
                <h2>Column 3</h2>
                <p>Third column inside first div</p></div>
        </div>
        <div class="orange">
            <a>Content inside second div. Shouldn't it slip underneath the floated elements of the first div?<br>
            It's not doing it, so why should I bother using the clearfix?</a>
        </div>
    </body>
</html>

You have a basic misunderstanding of what floats do. :slight_smile:

Floats will never overlap foreground content (unless you make them do so) as a floats’ purpose is to repel foreground content so that it wraps around the float (assuming that it has room to do so). Therefore the content in your anchor is simply pushed away from the floats and as you have 3 floats filling the whole line above then the content starts below the float. Should you remove one float or if the floats didn’t take up the whole width the text would wrap up the side of the float in any available space. It would not start underneath the float on a new line.

Note that although floats repel foreground content like text and images they do not apply the same process to the background and borders of following non floated elements. As floats are removed from the flow any background or border applied to non floated content following a float will simply slide under the float back to the containing block as if the float wasn’t there.

The clearfix hack is a misnamed hack in some respects because it really is a ‘containment’ hack. It’s main logic is to place an element after some floated content and then clears the floats. It does this so that the background of the parent (the red div in your example) would encompass the floats should there be no other content in that section. It’s the same effect as placing a div after the floats (but within the same parent) and applying clear:both to the div. It just does it without having to have an extra empty element in the html.

If you apply the clearfix hack to .red then the red background and its borders will encompass all your floats correctly and the orange background will no longer slide under the floats. You will then be able to put a margin-top on the orange background and it will move away from the floats if you wanted. If you hadn’t contained the floats the margin would also have slid under the floats and appear to not be doing anything.

There are many other behaviours that you need to understand as they affect how floats and other elements react because elements that create new block formatting contexts have different behaviours.

4 Likes

Thank you Paul! It’s clear I hadn’t understand the concept very well. I had no idea that the line box was different than the container box itself. I’ve read the page you linked me to and now I have a better understanding of boxes and the block formatting context.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.