السلام عليكم لدي مشكلة في موقي و هي ان ال footer يصعد خلف ال صورتين عند استخدام float

<head>
    <title>Prep 2 Lessons</title>

    <meta charset="utf-8">


    <link rel = "icon" href =  "\egypt english\photos\icon.jpg" type = "image/x-icon"> 
    <link rel="stylesheet" href="\Egypt English\style\style.css" type="text/css">
    <style>
        .terms{
            width: 100%;
            float: left;
        }
        .lcloumn{

            float: left;
        }
        .rcloumn{
            float: right;

        }
    </style>

</head>

<body>
    <nav class="uu">
    <li class="uu"><a class="uu" href="Homepage.html">Home</a></li>
    <li class="uu"><a class="uu" href="contact.html">Contact us</a></li>
    <li class="uu"><a class="uu" href="about.html">About</a></li>
    </nav>
    <div class="monoh"><a href="Homepage.html"><img class="bounce" src="\Egypt English\photos\egyl.png"></a></div>

    <nav class="midnav">
    <li><a href="#"></a></li>
        <li class="midnav"><a class="midnav" href="Homepage.html">Home Page</a></li>
        <li class="midnav"><a class="midnav" href="lessons.html">Lessons</a></li>
        <li class="midnav"><a class="midnav" href="story.html">Story</a></li>
        <li class="midnav"><a class="midnav" href="Grammer.html">Grammer</a></li>
        <li class="midnav"><a class="midnav" href="Login.html">Login</a></li>
        <li class="midnav"><a class="midnav" href="signup.html">Signup</a></li>
    </nav>
    <div class="terms">
        <div class="lcloumn">
        <a href="fterm.html" ><img src="\Egypt English\photos\fterm.png"></a>
        </div><div>
        <a href="sterm.html" ><img src="\Egypt English\photos\sterm.png"></a>
        </div>

    </div>


            <footer style="display: block;"><p>All copyrights has been reseved <b>&#169; 2019</b></p></footer>

    <script src="\Egypt English\js\script.js">

    </script>
</body>