BFC規(guī)則以及解決方法

路人甲Java 2021-09-09

展開全文

一、什么是BFC？

BFC是頁面上的獨立渲染區(qū)域

二、BFC產(chǎn)生規(guī)則

1、根標(biāo)簽(html)

2、float的值不為none

3、overflow的值不為visible

4、display的值為inline-block

5、position的值為absolute或fixed

三、BFC的特性

1、屬于同一個BFC的兩個塊元素，垂直margin兄弟關(guān)系會折疊（正數(shù)以大值為準(zhǔn)，有負(fù)數(shù)正常加減），父子關(guān)系會塌陷。

2、BFC區(qū)域不會與float的標(biāo)簽區(qū)域重疊。

3、浮動的標(biāo)簽也會被計算BFC高度。

4、BFC是獨立容器，內(nèi)部標(biāo)簽不會影響到外部標(biāo)簽。

四、可以解決的問題

1、外邊距折疊/塌陷：

　　父子關(guān)系在父級加overflow:hidden，父級加border，父級加高度

　 弟關(guān)系給其中一個兄弟設(shè)置成獨立的BFC。

2、自適應(yīng)兩欄或三欄布局

　　兩欄：左邊固定高度設(shè)置float，右邊不設(shè)寬設(shè)置BFC

<html>
<head>
    <style>
        .left {
            width: 100px;
            height: 400px;
            background: red;
            float: left;
        }
        .right {
            height: 500px;
            background: yellow;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

兩欄自適應(yīng)

　　三欄：左右固定高度設(shè)置float，中間不設(shè)寬設(shè)置BFC

<html>
<head>
    <style>
        .left {
            float: left;
            height: 500px;
            width: 150px;
            background: red;
        }
        .center {
            height: 600px;
            background: blue;
            overflow: hidden;
        }
        .right {
            float: right;
            height: 500px;
            width: 150px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="mid"></div>
</body>
</html>