当我对不相关的内容使用float属性时，页脚会升高

Question

我的网站上有两个盒子，我想彼此并排放置（由于格式化其他内容时出现问题，因此无法使用flex）。

当我使用float：在第一个正方形处时一切正常，但是一旦我使用float：在第二个正方形处，页脚就会跳起来！也正在使用WP和PHP（对于编码来说是一个非常新的东西，因此可以得到任何帮助）。第一个代码块是HTML，其余的是CSS。还尝试包括一个链接，以便您可以看到问题。 ] 1

    <section id="wrapper">
        <div class="square"></div>
        <div class="squaredos"></div>
</section>
</main>
<?php get_footer(); ?>


.square {
height: 500px;
width: 500px;
background-color: hsl(166, 87%, 45%);
float: left;
}

.squaredos {
height: 500px;
width: 500px;
background-color: hsl(166, 50%, 45%);
float: right;
position: relative;
left: 50px;
}

#site-footer {
    background: hsl(166, 87%, 45%);
    width: 100%;
height: 110px;
margin-bottom: 0;
}