前端面試知識點（五）--- BFC的建立和作用

養只狗發表於2020-10-09
前端面試

如何建立BFC

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC的作用

  1. 利用BFC避免margin重疊。
    一起來看一個例子：

    <style>
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <p>看看我的 margin是多少</p>
</body>

    頁面效果如下：在這裡插入圖片描述
    我們會發現，p標籤垂直方向的margin重合了，因為屬於同一個BFC的兩個相鄰的Box會發生margin重疊
    解決方法：我們可以讓把第二個p用div包起來，然後啟用它使其成為一個BFC

    <style>
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
    div{
        overflow: hidden;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <div>
        <p>看看我的 margin是多少</p>
    </div>
</body>

    頁面效果如下：在這裡插入圖片描述

  2. 解決兄弟盒子間因浮動產生的遮蓋問題

    <style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        font-size: 20px;
    }
    .right {
        height: 300px;
        background: rgb(170, 54, 236);
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>

    頁面效果如下：在這裡插入圖片描述
    我們發現當左邊的盒子設定浮動後，右邊的盒子被遮蓋了，為了解決這個問題，我們讓right盒子成為一個單獨的BFC

    .right {
	overflow: hidden; //建立BFC
    height: 300px;
    background: rgb(170, 54, 236);
    font-size: 40px;
}

    頁面效果如下：在這裡插入圖片描述

  3. 解決父元素因子元素浮動產生的高度塌陷問題（清除浮動）

相關文章