css 塊級格式化上下文（BFC）

時間 2019-12-07

標籤 css 格式化上下文 bfc 欄目 CSS 简体版

原文原文鏈接

1、塊級格式化上下文（BFC）

一、什麼是塊級格式化上下文？

Block Formatting Contexts (BFC，塊級格式化上下文)就是一個塊級元素 的渲染顯示規則
  （能夠把 BFC 理解爲一個封閉的大箱子，，容器裏面的子元素不會影響到外面的元素）

二、觸發BFC的條件以下：

根元素
float的值不爲none。
overflow 除了 visible 之外的值（hidden，auto，scroll）
display的值爲table-cell, table-caption, inline-block中的任何一個。
絕對定位元素：position (absolute、fixed)
彈性盒 flex boxes (元素的 display: flex 或 inline-flex)

三、BFC 的佈局規則：

內部的盒子會在垂直方向，一個個地放置；
BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然
屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊；
計算BFC的高度時，浮動元素也參與計算
每一個元素的左邊，與包含的盒子的左邊相接觸，即便存在浮動也是如此；
BFC的區域不會與float重疊；

四、BFC特性

1.同一BFC下外邊距會發生摺疊：

代碼以下：html

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>外邊距摺疊</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            height:500px;
            margin:0 auto;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            margin:100px;
        }
        .btm2{
            width:100px;
            height:100px;
            background-color:red;
            margin:100px ;
        }
    </style>
    
</head>
<body>
    <div class="box">
    
        <div class="btm1">上下100margin</div>
        
        <div class="btm2">上下100margin</div>
    
    </div>
</body>
</html>

效果圖：
佈局

第一個div的下邊距和第二個div的上邊距發聲了重疊，因此兩個盒子之間距離只有100px，而不是200px。flex

解決方法：spa

放在不一樣的BFC下

代碼以下：code

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>外邊距摺疊</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            height:500px;
            margin:0 auto;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            margin:100px;
        }
        .btm2{
            width:100px;
            height:100px;
            background-color:red;
            margin:100px ;
        }
        .container{
            overflow: hidden;
        }
    </style>
    
</head>
<body>
    <div class="box">
        <div class="container">
            <div class="btm1">上下100margin</div>
        <div>
        <div class="container">
            <div class="btm2">上下100margin</div>
        <div>
    </div>
</body>
</html>

效果圖：
orm

此次咱們能夠清晰的看清兩個中間是200px；並沒用重疊。htm

二、BFC能夠包含浮動的元素（清除浮動）

代碼以下：圖片

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>高度塌陷</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
        
            margin:0 auto;
            border:1px solid green;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            float:left;
        }
        .btm2{
            background-color:red;

        }
    
    </style>
    
</head>
<body>
    <div class="box">

            <div class="btm1">浮動</div>

        
            <div class="btm2"></div>
    
    </div>
</body>
</html>

效果圖：utf-8

因爲容器內元素浮動，脫離了文檔流，因此容器只剩下 2px 的邊距高度。若是使觸發容器的 BFC，那麼容器將會包裹着浮動元素。文檔

代碼以下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>高度塌陷</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            overflow:hidden;
            margin:0 auto;
            border:1px solid green;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            float:left;
        }
        .btm2{
            background-color:red;

        }
    
    </style>
    
</head>
<body>
    <div class="box">

            <div class="btm1">浮動</div>

        
            <div class="btm2"></div>
    
    </div>
</body>
</html>

三、侵佔浮動元素的問題

代碼以下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>高度塌陷</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            overflow:hidden;
            margin:0 auto;
            border:1px solid green;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            float:left;
        }
        .btm2{
            width:300px;
            height:300px;
            background-color:red;
            
        }
        
    </style>
    
</head>
<body>
    <div class="box">

            <div class="btm1">浮動</div>
    

            
        
            <div class="btm2">
            
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！

            </div>

    
    </div>
</body>
</html>

效果圖：

解決方法：
經過觸發btm2的BFC解決
代碼以下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>高度塌陷</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            overflow:hidden;
            margin:0 auto;
            border:1px solid green;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            float:left;
        }
        .btm2{
            width:300px;
            height:300px;
            background-color:red;
            
        }
        .bb{
            overflow:hidden
        }
    </style>
    
</head>
<body>
    <div class="box">

            <div class="btm1">浮動</div>
    
    
        <div class="bb">
            
        
            <div class="btm2">
            
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！
            歡迎你們觀看！

            </div>
        </div>
    
    </div>
</body>
</html>

效果圖：