BFC原理解析

朴灿烈づ我的快乐病毒、 2023-08-17 15:54 70阅读 0赞

#### BFC的概念 ####

> 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
> 
> 它是一个独立的渲染区域，只有块级元素参与，它规定了内部的Block level Box如何布局，并且与这个区域外部好不相干。

#### BFC能解决的问题 ####

1.  浮动定位
2.  消除外边距折叠
3.  清除浮动
4.  自适应多栏布局
5.  ...

#### BFC的创建 ####

下列方式会创建BFC

1.  根元素或包含根元素的元素
2.  浮动元素(float不为none)
3.  绝对定位元素(position为absolute或者fixed)
4.  display为inline-block,table-cell,table-caption
5.  overflow值不为visible
6.  弹性元素(flex布局)
7.  网格元素(grid布局)

#### BFC的约束规则 ####

*  内部的Box会在垂直方向上一个接一个的放置
 *  垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
 *  每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
 *  BFC的区域不会与float的元素区域重叠
 *  计算BFC的高度时，浮动子元素也参与计算
 *  BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

#### BFC的应用 ####

1.  防止margin重叠
    
        <body>
            <p>top</p>
            <p>bottom</p>
        </body>
        
        <style>
        p {
            width: 100px;
            height: 100px;
            background: yellow;
            line-height: 100px;
            margin: 10px;
            text-align: center;
        }
        </style>
    
    展现效果：
    
    [![68747470733a2f2f7773322e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636239703232666a3330336430366e6a72392e6a7067][]][68747470733a2f2f7773322e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636239703232666a3330336430366e6a72392e6a7067]
    
    两个div中间的间距为10px,而不是20px,因为它们处于同一个BFC
    
    解决方案为给第二个div再包一层div，设置其overflow属性,使它们处于不同的BFC：
    
        <body>
            <p>top</p>
            <div>
                <p>bottom</p>
            </div>
        </body>
        <style>
        p {
            width: 100px;
            height: 100px;
            background: yellow;
            line-height: 100px;
            margin: 10px;
            text-align: center;
        }
        
        div    {
            overflow: auto;
        }
        
        </style>
    
    效果：
    
    [![68747470733a2f2f7773342e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636664376c64766a3330336a30366e6d78312e6a7067][]][68747470733a2f2f7773342e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636664376c64766a3330336a30366e6d78312e6a7067]
2.  让浮动内容与周围内容等高
    
    看如下例子：
    
        <div class="box">
            <div class="float">浮动元素</div>
            <p>未浮动元素</p>
        </div>
        <style>
        .box {
            background-color: rgb(224, 206, 247);
            border: 5px solid rebeccapurple;
        }
        
        .float {
            float: left;
            width: 200px;
            height: 150px;
            background-color: white;
            border:1px solid black;
            padding: 10px;
        }      
        
        </style>
    
    产生的效果：
    
    [![68747470733a2f2f7773312e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636a67363878696a3330737630366f3073742e6a7067][]][68747470733a2f2f7773312e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636a67363878696a3330737630366f3073742e6a7067]
    
    由于浮动，使得浮动元素的高度高于旁边的元素，解决方式为使父box生成一个BFC，如下：
    
        <div class="box">
            <div class="float">浮动元素</div>
            <p>未浮动元素</p>
        </div>
        <style>
        .box {
            background-color: rgb(224, 206, 247);
            border: 5px solid rebeccapurple;
            overflow: auto;
        }
        
        .float {
            float: left;
            width: 200px;
            height: 150px;
            background-color: white;
            border:1px solid black;
            padding: 10px;
        }      
        
        </style>
    
    效果如下：
    
    [![68747470733a2f2f7773342e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636c70696e37656a3330737930356f6161342e6a7067][]][68747470733a2f2f7773342e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636c70696e37656a3330737930356f6161342e6a7067]

转载于:https://www.cnblogs.com/wangxi01/p/11213893.html

[68747470733a2f2f7773322e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636239703232666a3330336430366e6a72392e6a7067]: https://camo.githubusercontent.com/808b5d099fe31c62c7834c5018f2a97782b2df21/68747470733a2f2f7773322e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636239703232666a3330336430366e6a72392e6a7067
[68747470733a2f2f7773342e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636664376c64766a3330336a30366e6d78312e6a7067]: https://camo.githubusercontent.com/578eb3cb270649e6bee1ba4f1f67d1d9abdac55c/68747470733a2f2f7773342e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636664376c64766a3330336a30366e6d78312e6a7067
[68747470733a2f2f7773312e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636a67363878696a3330737630366f3073742e6a7067]: https://camo.githubusercontent.com/bc21678473bccef802543c1c2968362fd767788f/68747470733a2f2f7773312e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636a67363878696a3330737630366f3073742e6a7067
[68747470733a2f2f7773342e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636c70696e37656a3330737930356f6161342e6a7067]: https://camo.githubusercontent.com/e2cf8ce0384647d49e5516230742aa40227c11da/68747470733a2f2f7773342e73696e61696d672e636e2f6c617267652f303036744b665463677931673168636c70696e37656a3330737930356f6161342e6a7067