A use of the overflow property that i don't understand?!

HTML/CSS
1

In a youtube video the guy uses overflow to somehow create space. I dont understand it. Why does it behave like in the picture below. I do not get it :thinking:

overflow
overflow744×416 34.9 KB

I would like to post the whole code but it says “as a new user I can only post two links”??? In this piece of code the important settings are in bold:

.header ul {
margin: 0;
padding: 0;
list-style: none;
background-color: #fff;
overflow: hidden;
}

.header ul a {
display: block;
outline: 1px solid red;
padding: 20px;
border-radius: 1px solid #aaa;
text-decoration: none;
background: dodgerblue;
}

.header ul a:hover {
background-color: #ddd;
}

header .logo {
float: left;
** display: block;**
font-size: 2em;
padding: 10px 20px;
background-color: gold;
}

But here is the video with a time mark:

1 Like
2

I think the overflow: hidden is creating a new block formatting context, which affects the layout (in this case by excluding external floats). You’ll notice that if you swap out overflow: hidden with display: flow-root (which also creates a new block formatting context), you’ll see the same effect.