[css] BFC規則以及解決方法

本文轉載自查看原文 2020-10-26 01:13 519 HTML&CSS

一、什么是BFC？

BFC是頁面上的獨立渲染區域

二、BFC產生規則

1、根標簽(html)

2、float的值不為none

3、overflow的值不為visible

4、display的值為inline-block

5、position的值為absolute或fixed

三、BFC的特性

1、屬於同一個BFC的兩個塊元素，垂直margin兄弟關系會折疊（正數以大值為准，有負數正常加減），父子關系會塌陷。

2、BFC區域不會與float的標簽區域重疊。

3、浮動的標簽也會被計算BFC高度。

4、BFC是獨立容器，內部標簽不會影響到外部標簽。

四、可以解決的問題

1、外邊距折疊/塌陷：

　　父子關系在父級加overflow:hidden，父級加border，父級加高度

　 弟關系給其中一個兄弟設置成獨立的BFC。

2、自適應兩欄或三欄布局

　　兩欄：左邊固定高度設置float，右邊不設寬設置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>

兩欄自適應

　　三欄：左右固定高度設置float，中間不設寬設置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>

三欄自適應

3、防止文字環繞

　　給文字設置成BFC可以解決文字環繞

4、清除浮動

　　給父級設置成BFC可以清除浮動，⑤浮動的標簽也會被計算BFC高度。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。