What exactly clear float does?

1

For instance in my project: https://codepen.io/oshikurou/pen/GwqeOM?editors=0100
i have the code in my css:

&:after{
      content: "";
      display: block;
      clear: both;
    }

But if i remove this piece of code i cant see my navbar. The navbar on hover works fine though. Can anyone please explain to me why exactly is that happening with clear float?
thanks

2

Using clear: both; will remove an element out of float flow.

Checkout this article.

1 Like
3

i still cant understand why i needed it in my example :confused:

4

It’s because you are making your li elements float. If you don’t have the above code,

your html will behave strangely. So if you are using floats, the above properties are necessary.

5

yeah but i noticed that only the background color is not working. When i hover over the li elements i can see the background color. So my question actually is: “why the background color is the one that doesnt apear?” xD

6

So what float does is remove the element from the normal document flow. It exists so that when you have some text and (for example) an image that you want to sit in the text, you can apply float to the image and anything that comes after it will flow around the image. Like so:

If you apply float to all the elements in your navbar, that means they are all removed from the document flow. So the container for them now effectively has no elements in, therefore it collapses. Your background colour is working fine, but because the element has nothing in it, it has no height, and because it has no height, you can’t see it.

With float, anything you put after floated elements is the thing that flows around those elements. It’s easier to see this visually:

So comment out the clear:both. First, add some text before the nav items, like:

<ul>
        hello
        <li><a href="">Home</a></li>
        <li><a href="">About Us</a></li>

Screenshot%20from%202018-11-12%2012-47-43
Screenshot%20from%202018-11-12%2012-47-431180Ă—71 3.73 KB

The floated items are after that, so they are just removed from the document flow as before, they don’t sit on the background. But you can see your background is there, but just for that bit of text

Now move the text to after your nav items, like so:

        <li><a href="">Portfolio</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Contact</a></li>
        hello

Now the text flows around the floated items (kinda)

Screenshot%20from%202018-11-12%2012-48-15
Screenshot%20from%202018-11-12%2012-48-151197Ă—156 4.47 KB

They are still removed from the document flow, but because that text is flowing around them, the browser takes that into account for the size of the container that has your background colour applied.

Using clear allows this to be “fixed”. clear, when applied to an element, says “force this to move down to the next line”. That piece of text above, when put after the floated elements, actually did the same thing. So this:

&:after{
      content: "";
      display: block;
      clear: both;
    }

What it’s doing is creating an empty element in the CSS (so it will be invisible), and applying clear to it, forcing that empty element onto a new line. The browser now takes that into account, and the containing element does not collapse.

(I hope that was kinda understandable)

Note that this is all a hack first figured out in 2004 to get around CSS layouts being awful. The two actual CSS layout methods introduced in the last few years, Flex and Grid, completely remove the need for using floats for layout. But there is a lot of code around that uses floats because it was the best option for ~10 years, so I think it is important to know how it works.

1 Like
7

Thank you sir. That was more than a good explanation. Realy thanks. Can you just tell me an example in which i will need to use floats now that flex and grid exist(or an example in which the “best option” i could use is floats) ?

8

:smile: glad it was helpful. One thing that I kinda made an error on is that floated items aren’t take out of the document flow completely, things that come after them in the HTML still come after them (contrast with position:absolute or position:fixed which completely remove the element from the document flow and let you put it anywhere you fancy, even if that means they’ll be on top of other things).

An example of usage is what float is designed to do, allow text to flow around the item that is floated

Note the text has to come after the floated item, and it will do wierd things on mobile (overlapping the container if the image is too big) if max-width: 100%; isn’t set on the image.