CSS学习之路: 浅析CSS中的BFC独立渲染区域

原创已于 2024-01-04 11:30:40 修改 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2023-04-19 18:01:00 首次发布

css3 专栏收录该内容

5 篇文章

订阅专栏

BFC(block formatting content)

中文名是"块级格式化上下文"，一个独立渲染的区域，内部不影响外部，外部也不会侵入内部。

特点

BFC是一个元素，他会永远的包裹内部的每一个元素，把外部的元素隔绝在外。也可以隔绝bfc上方和下方的元素。

BFC的布局规则

内部块元素在垂直方向，独占一行，由上到下挨个排列，块元素在垂直方向的总距离：内容+内边距+边框+外边距，区域内块元素垂直方向的margin会重叠(大吞小)，左右会叠加。

块元素垂直方向的margin会重叠(大吞小)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         #div1,#div2 {
            width:60px;
            height:60px;
        }
        #div1{
            background:red;
            margin-bottom:20px;
        }
        #div2{
            margin-top:10px;
            background:yellow;
             
        }
    </style>
</head>
<body>
    <div>
        <div id="div1"></div>
        <div id="div2"></div>
    </div>
</body>
</html>

在这里插入图片描述

块元素左右方向的margin会叠加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         #div1,#div3{
            width:60px;
            height:60px;
        }
        #div1{
            background:red;
            margin-right:20px;
        }
        #div3{
            margin-left:10px;
            background:blue;
        }
       
    </style>
</head>
<body>
    <div style="display:flex">
        <div id="div1"></div>
        <div id="div3"></div>
    </div>
</body>
</html>

在这里插入图片描述

如何形成BFC区域

float不是none
position值不是static或relative
display值inline-block table flex inline-flex
overflow的值不是visible

平时在哪里会用到BFC

1. 解决浮动后的高度坍塌

出现的问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         #div{
            width:200px;
            background:black;
         }
         #div1,#div3{
            width:60px;
            height:60px;
        }
        #div1{
            background:red;  
            float:left;     
        }
        #div3{
            background:blue;
            float:right;
        }
       
    </style>
</head>
<body>
    <div id="div">
        <div id="div1"></div>
        <div id="div3"></div>
    </div>
</body>
</html>

在这里插入图片描述
解决方案（3个方向）

给父元素设置固定的宽高，如此代码没有复用性，所以是不好的解决方法
让父元素形成一个BFC区域，比如让父元素也浮动，或者给父元素添加display:table，或者给父元素添加overflow：hidden等方式，但是每个方式会带来其他的问题。比如父元素浮动会影响后续的页面页面，设置display:table，会有浏览器兼容问题，有的浏览器会默认table的高度在不设置或没有tr，td做支撑的时候为0，overflow：hidden，有的时候需要溢出元素显示出来。
给内部元素添加clear：both。方式有2：其一，在最后直接添加空元素，但是会破坏dom结构，不是很友好；其二，使用伪类方式，这是最完美得解决方法。

div::after{
   content:'';
   clear:both
}

2. 解决竖直方向margin重叠

出现的问题：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
        
        #div1,#div3{
           width:60px;
           height:60px;
       }
       #div1{
           background:red;  
           margin-bottom:20px;    
       }
       #div3{
           background:blue;
           margin-top:20px;    
       }
      
   </style>
</head>
<body>
   <div id="div">
       <div id="div1"></div>
       <div id="div3"></div>
   </div>
</body>
</html>

在这里插入图片描述
解决方案
把其中一个元素设置成BFC独立渲染区域，具体做法是给一个元素外面再包一层大div，给大div设置BFC，比如，设置overflow：hidden，这样外部元素和内部元素互相不影响，两个margin就可以叠加。或者给上方的元素添加一个大div，使用伪类给div的子元素添加一个尾部元素设置成display：table，这样可以形成一个BFC，是上方元素和下方元素隔绝互不影响。

3. 解决外边距溢出的问题子元素的外边距作用到父元素上

出现的问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div{
            background:black;
            width:200px;
            height:200px;
        }
         #div1,#div3{
            width:60px;
            height:60px;
        }
        #div1{
            background:red;     
        }
        #div3{
            margin-top:20px;
            background:blue;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div">
        <div id="div3"></div>
    </div>
</body>
</html>

在这里插入图片描述
解决方案 (三个)

BFC相关的
给父元素设置overflow:hidden，让父元素形成一个BFC区域，缺点是子元素没办法溢出
在子元素的前面，父元素的里面添加空的table，由于table是BFC区域，所以子元素的外边距转移不出去，从而解决问题.但是如此改变了dom结构，不够友好，所以更多的会使用方式3。
使用边框
给父元素添加边框可以解决问题，但是会带新的问题，边框颜色会影响页面效果，解决：设置透明度；边框会影响页面布局，解决=>box-sizing：border-box。
使用父元素的padding-top代替子元素的margin-top不好，会改变整体的高度。