What does float do to make my header have a shorter height and why does do so?

Question

I know that using float is used to align images and stuff but i saw a video where the person made a header through floats in:

This is the css to the website.
header{
position:fixed;
top:0; left:0; right:0;
background:#ffffff;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
padding:20px 7%;
display:flex;

align-items:center;

}
header .navbar ul{
list-style:none;
}

header .navbar ul li{
position:relative;
float:left;/*This is where the float is*/
}

When the float is added it makes the heade seem to be adjusted to the length of the page.

After float:

https://ibb.co/6NhSjKn

Before float:

https://ibb.co/sgqpfPj

From video url: https://www.youtube.com/watch?v=bk3Y4heVdFs&t=298s

Answer 1

You might want to read this article, which could have an answe to your question:

https://css-tricks.com/almanac/properties/f/float/