为什么要清除：图像上的左侧不起作用？

Question

我有一个徽标，后面是导航栏，然后是图片。我希望徽标和图像彼此相邻。我想要它们下面的图像。因此，我将徽标和导航浮动到左侧，并清除img左侧。不幸的是，图像还停留在他们身上...

我只使用HTML5和CSS3进行编码。

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

.logo {
  float: left;
}

nav {
  float: left;
}

img {
  clear: left;
}

<header>
  <a href="./index.html" title="Welcome" class="logo"
    ><img src="mylogo.png" style="width:42px;height:42px"
  /></a>
  <nav>
    <a href="./index.html" title="Welcome">Welcome</a>
    <a href="./about.html" title="About">About</a>
    <a href="./artwork.html" title="Art Work">Art Work</a>
    <a href="./events.html" title="Events">Events</a>
  </nav>
</header>
<img src="myimage.jpg" style="width:180px;height:270px" />
<p>&copy; 2019 <a href="http://www.photographer.com/">Name Photographer</a></p>

我不明白，因为我在所有其他页面上使用了完全相同的代码，只是它是导航栏后面的h1，并且显然工作正常，h1位于徽标和菜单下。但是在它是图像的页面上，它不起作用...