css 块级格式化上下文（BFC）

一、块级格式化上下文（BFC）

1、什么是块级格式化上下文？

    Block Formatting Contexts (BFC，块级格式化上下文)就是一个块级元素 的渲染显示规则
  （可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素）

2、触发BFC的条件如下：

根元素
float的值不为none。
overflow 除了 visible 以外的值（hidden，auto，scroll）
display的值为table-cell, table-caption, inline-block中的任何一个。
绝对定位元素：position (absolute、fixed)
弹性盒 flex boxes (元素的 display: flex 或 inline-flex)

3、BFC 的布局规则：

内部的盒子会在垂直方向，一个个地放置；
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
属于同一个BFC的两个相邻Box的上下margin会发生重叠；
计算BFC的高度时，浮动元素也参与计算
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
BFC的区域不会与float重叠；

4、BFC特性

1.同一BFC下外边距会发生折叠：

代码如下：

<!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。

解决方法：

放在不同的BFC下

代码如下：

<!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>

效果图：
图片描述

这次我们可以清晰的看清两个中间是200px；并没用重叠。

2、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>

效果图：图片描述

由于容器内元素浮动，脱离了文档流，所以容器只剩下 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>

3、侵占浮动元素的问题

代码如下：

<!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>

效果图：
图片描述

css 块级格式化上下文（BFC）

一、块级格式化上下文（BFC）

1、什么是块级格式化上下文？

2、触发BFC的条件如下：

3、BFC 的布局规则：

4、BFC特性

1.同一BFC下外边距会发生折叠：

2、BFC可以包含浮动的元素（清除浮动）

3、侵占浮动元素的问题

持续更新，欢迎大家指教！

酷酷的成

引用和评论

面向对象编程

网页设计的垂直居中

CSS团队协作规范

前端开发工具

Jerry和您聊聊Chrome开发者工具

CSS 如何模拟“真实的”进度条？

面向企业级前端应用的开发框架 UI5 的发展简史介绍