Clear floating and flex layout

I would like to ask why the clear floating code I wrote is invalid.
and. How to use the flex layout to make the horizontal arrangement of the above two div fill the entire screen. The third div is filled with the bottom location.
code is as follows: `< body >

<article class="major">
      <div class="major_left"></div>
      <div class="major_right"></div>
      <footer class="foot"></footer>
</article>

< / body > `

.major_left{
    float: left;
    width: 35%;
    height: 70vh;
    background: blue;
}
.major_right{
    float: left;
    width: 65%;
    height: 70vh;
    background: black;
}
.foot{
    width: 100%;
    height: 30vh;
    background: red
}
.foot:before{
    overflow: hidden;
    height: 0;
    clear: both;
    visibility:hidden;
    content: "";
    display: block;
}
Feb.26,2021

clearing the float takes effect, it's just that you misplaced it


.foot {

    width: 100%;
    height: 30vh;
    background: red;
    clear: both;
    overflow: hidden;
}

positive solution


flex layout

  http://www.ruanyifeng.com/blo.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2c61d-33ed9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2c61d-33ed9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?