Why is overflow: hidden; providing the background-color of div?

I found this code on w3school website, and I have 3 questions

  1. Why is the background color of div get lost If I remove the overflow: hidden;?
  2. Why is the height of div become smaller when I remove the float: left;?
  3. What does text-align: center; doing here?
/* Add a black bacground color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;

/* Style the links inside the navigation bar */
.topnav a{
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
<!DOCTYPE html>
<html lang="en">
      <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
        <title>Top Navigation</title>
      <div class="topnav">
        <a class="active" href="#home">Home</a>
          <a href="#news">News</a>
          <a href="#contact">Contact</a>
          <a href="#about">About</a>


Retrogram — A daily word puzzle from the 1970s

Flutter Gauges library includes the data visualization widgets Linear Gauge and Radial Gauge to create modern, interactive, animated gauges.