Why does the float: left declaration remove white space above the header?

Hi Simon - if you post the code (both html & css) you are working with maybe someone can help you understand it a bit better.

Hi Sam, I'm kind of new but I'll try to present it as clear as possible:

In my HTML file I declare a header which contains 2 headlines and a navigation bar.

<header>
      <a href="index.html" id="logo">
        <h1>Simon Buysse</h1>
        <h2>Front-end Web Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

Without any CSS rule, this would create a whitespace above the header as we can see in this image:

What I think is strange is that this whitespace dissapears when you add a float property to the header element, even when we don't change the margins!

Hi Simon - you are correct in the fact that the float property will remove that whitespace (maybe someone can explain the reason for this further but its probably something to do with the fact that it pushes the parent element around more). However I found with your code that the other issue causing the whitespace was actually the margin on the h1 element - check out this Codepen and have a play with the values. This example has no whitespace and doesn't use the float property, which is probably a better way to work with the css. Hope this helps.

Hi Martin, With what elements margin would it be collapsing then? Even when all top margins of every child element is set to 0, there is still that whitespace. Sam, also the h1 has no margin right now and still there is that whitespace that gets cleared when adding the float property. Here's my CSS code

/*  **********************
GENERAL
*********************** */
body{
  margin: 0;
  padding: 0;
  font-family:'Open Sans', sans-serif;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
}


/*  **********************
HEADING
*********************** */
header{
  /*float: left;*/
  width: 100%;
  /*margin: 0 0 30px 0;*/
  /*padding: 5px 0 0 0;*/
  }

/*this wraps around the headers*/
#logo{
  text-align: center;
  margin: 0;
}

h1{
  font-family:'Changa One', sans-serif;
  /*margin: 15px 0;*/
  font-size: 1.75em;
  line-height: 0.8em;
  font-weight: normal;
}

h2{
  font-size:0.75em;
  font-weight: normal;
}

/*  **********************
NAVIGATION
*********************** */
nav{
  text-align: center;
  padding: 10px 0;
  /*margin: 20px 0 0;*/
}

nav ul{
  list-style: none;
  /*take away the margin on top of the ul element, the 10px doesn't change anything as far as I can tell*/
  margin: 0 10px;
  padding: 0;
}

nav li{
  display: inline-block;
}

/*The padding will make it possible to click next to the link and still click correctly*/
nav a{
  font-weight: 800;
  padding: 15px 10px;
}

Awesome! Thank you so much for the help Sam & Martin! I've got a much better understanding of what is happening right now :)