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.

Menu