BFC的自我介绍

曾经终败给现在 2023-07-25 11:23 5阅读 0赞

## BFC ##

大家好我叫BFC,是KFC的兄弟（哈哈哈开始吧）

*  什么是BFC  
    1.BFC(Block formatting context)，直译为"块级格式化上下文"；  
    2.BFC是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相干。
 *  元素的显示模式display（提到BFC能联想到）  
    1.分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。
 *  哪些元素会具有BFC的条件  
    1.不是所有的元素模式都能产生BFC（不是所有的牛奶都叫特仑苏，咦跑题了）；  
    2.display 属性为 block, list-item, table 的元素，会产生BFC.；  
    3.这个BFC 有着具体的布局特性（有宽度和高度 ，外边距margin 有内边距padding 有边框 border）。
 *  什么情况下可以让元素产生BFC  
    1.以上盒子具有BFC条件了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？  
    2.同样，要给这些元素添加如下属性就可以触发BFC（-float属性不为none，-position为absolute或fixed，-display为inline-block, table-cell, table-caption, flex, inline-flex，-overflow不为visible）。
 *  BFC元素所具有的特性  
    1.在BFC中，盒子从顶端开始垂直地一个接一个地排列；  
    2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠；  
    3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）；  
    4.BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘；  
    5.计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
 *  BFC能用来做什么  
    (1) 清除元素内部浮动，只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了（主要用到 ，计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。）  
    代码块：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
            
            .father { 
                width: 500px;
                background-color: pink;
                border: 1px solid red;
                /* float: left; */
                /* overflow: hidden; */
                position: absolute;
            }
            
            .son1 { 
                width: 200px;
                height: 200px;
                background-color: purple;
                float: left;
            }
            
            .son2 { 
                width: 100px;
                height: 100px;
                background-color: skyblue;
                float: left;
            }
        </style>
    </head>
    
    <body>
        <div class="father">
            <div class="son1"></div>
            <div class="son2"></div>
        </div>
    </body>
    
    </html>

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]  
具体清除浮动请看俺的另一篇博文\[很全面\]：[清除浮动的方法][Link 1]  
(2) 解决外边距合并问题（主要用到 ，盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。）  
代码块

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
            
            .father { 
                width: 500px;
                background-color: pink;
                border: 1px solid red;
                height: 700px;
            }
            /* .clear { overflow: hidden; } */
            
            .son1 { 
                width: 200px;
                height: 200px;
                background-color: purple;
                margin-bottom: 50px;
            }
            
            .son2 { 
                width: 100px;
                height: 100px;
                background-color: skyblue;
                margin-top: 100px;
            }
        </style>
    </head>
    
    <body>
        <div class="father">
            <div class="clear">
                <div class="son1"></div>
            </div>
            <div class="son2"></div>
        </div>
    </body>
    
    </html>

结果展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]  
去掉注释后（给son1添加BFC）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 2]  
(3) 制作右侧自适应的盒子问题（主要用到 ，普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文）  
代码块

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
            
            .father { 
                width: 700px;
                background-color: pink;
                border: 1px solid red;
            }
            
            .son1 { 
                width: 200px;
                height: 200px;
                background-color: purple;
                float: left;
            }
            
            .son2 { 
                width: 400px;
                height: 400px;
                background-color: skyblue;
                /* overflow: hidden; */
            }
        </style>
    </head>
    
    <body>
        <div class="father">
            <div class="son1"></div>
            <div class="son2">我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应我能自适应</div>
        </div>
    </body>
    
    </html>

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 3]  
去掉注释后（给son2添加BFC）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 4]

*  BFC 总结  
    1.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；  
    2.反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。

**总是作为BFC的我自我感觉良好，哪个行内元素不服，来战？？？（哈哈哈）  
OVER**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/6397237769804f4cad042a9eea99b083.png
[Link 1]: https://blog.csdn.net/cwq521o/article/details/105440612
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/e8a84c6109d745ae874072af1efb7d24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230528/efe3938193604c92acda41dcf8ffe3b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20230528/3c98b4be2d504e63a04e447944230bed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20230528/6b69e9f6cce447d996924334c3561e53.png