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>

三、侵占浮动元素的问题