在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 清除浮動(dòng)和flex布局

清除浮動(dòng)和flex布局

請(qǐng)問為什么我寫的清除浮動(dòng)代碼無效啊。
還有。怎么用flex布局才可以讓上面兩個(gè)div橫向排列撐滿整個(gè)屏幕。第三個(gè)div充滿最下面的位置啊
代碼如下：`<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;
}
回答
編輯回答
失心人

flex布局

    body{
        margin: 0;
    }
    .major{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .major_left{
       height: 70vh;
       width: 35%;
       background: blue;
    }
    .major_right{
       flex: 1 1 auto;
       height: 70vh;
       background: black;
    }
    .foot{
        width: 100%;
        height: 30vh;
        background: red
    }
2017年6月14日 17:51
編輯回答
晚風(fēng)眠

.foot{

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

正解

2017年5月6日 13:43
編輯回答
毀憶

清除浮動(dòng)生效的，只是你放錯(cuò)地方了而已

2017年12月12日 23:04
編輯回答
久愛她
<article class="major">
    <div class="major_left"></div>
    <div class="major_right"></div>
</article>
<footer class="foot"></footer>
.major {
    display: flex;
}
.major_left {
    width: 35%;
    height: 70vh;
    background: blue;
}
.major_right {
    width: 65%;
    height: 70vh;
    background: black;
}
.foot {
    width: 100%;
    height: 30vh;
    background: red
}

flex的詳細(xì)介紹可以參考阮一峰的文章：
語法篇:http://www.ruanyifeng.com/blo...^%$
實(shí)戰(zhàn)篇:http://www.ruanyifeng.com/blo...

2017年12月10日 11:17