BFC規則以及解決方法-有解無憂

一、什么是BFC？

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

二、BFC產生規則

1、根標簽(body)

2、float的值不為none

3、overflow的值不為visible

4、display的值為inline-block

5、position的值為absolute或fixed

三、BFC的特性

1、垂直方向排列，（類似塊級特性）

2、BFC內部每個內部標簽都會與左邊界相接觸，（類似塊級特性）

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

4、BFC區域不會與float的標簽區域重疊，

5、浮動的標簽也會被計算BFC高度，

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

四、可以解決的問題

1、外邊距折疊/塌陷：

　　父子關系在父級加overflow:hidden，兄弟關系給其中一個兄弟設定成獨立的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 ></div>
    <div ></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 ></div>
    <div ></div>
    <div ></div>
</body>
</html>

三欄自適應

3、防止文字環繞

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

4、清除浮動

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/191496.html

標籤：Html/Css

上一篇：前端基礎——CSS（一）

下一篇：前端js中的“math”四舍五入取整