BFC究竟是什么

最新推荐文章于 2024-08-03 17:34:58 发布

流沙丶

最新推荐文章于 2024-08-03 17:34:58 发布

阅读量218

点赞数

分类专栏： Web前端疑难点

本文链接：https://blog.csdn.net/qq_40968745/article/details/96978352

版权

Web前端疑难点专栏收录该内容

8 篇文章 0 订阅

订阅专栏

BFC（block format content 块级格式化上下文）本质上就是一个封闭的空间，不管内部元素如何布局BFC都不会影响外面的盒子

不是所有的元素都可以产生 BFC特性，只有display模式为 block table list-item等块级元素可能会产生BFC,是可能会产生BFC区域 ，并不是所有的块级元素都会产生BFC区域块**级元素只是具备了产生BFC的条件****（欲练神功必先自宫一个道理，自宫是修炼宝典的条件，块级元素是产生BFC的条件）

块级元素触发BFC的条件：
当给块级元素添加下面的属性就会触发BFC产生封闭的区域
float 浮动
position 定位
overflow 清除浮动

BFC元素的特性布局规则：
在BFC中盒子从顶端开始垂直一个个排列（跟文档流一样）
盒子间距离由外边距决定，同一个BFC的盒子相邻的外边距会发生重叠（外边距合并的问题）
每一个盒子左边缘会与大盒子的内边框对齐
BFC区域不会与浮动盒子产生交集，而是紧贴浮动盒子边缘
BFC区域可以获取浮动盒子的高度

根据BFC的特性和布局规整解决的问题：
清除元素浮动，只要把父元素设置为BFC那么就可以清除子元素浮动的问题，因为计算BFC高度的时候会把浮动的元素的高度计算上

代码实例

    <style>
       .father{
            width: 400px;
            background-color: #4182FA;
            margin: 200px auto;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: #FF8500;
        }
    </style>
</head>
<body>
   <div class="father">
       <div class="son"></div>
   </div>
</body>

此时没有给父元素设置高度父元素被子元素撑开，高度与子元素一直

效果
在这里插入图片描述
当我们给子元素添加浮动后，浮动脱离文档流不占位置，那么父元素就获取不到子元素的高度，此时父亲高度为0

效果
在这里插入图片描述

清除浮动正是运用了BFC区域的特性，BFC区域可以获取浮动盒子的高度
因此我们需要设置触发块级元素成为BFC区域的条件就可以解决这个问题

代码实例

     .father{
            width: 400px;
            background-color: #4182FA;
            margin: 200px auto;
           overflow: hidden;  /*父添加 Overflow 或者 float 或者 定位触发BFC区域*/
        }
        .son{
            width: 100px;
            height: 100px;
            float: right;
            background-color: #FF8500;
        }
    </style>
</head>
<body>
   <div class="father">
       <div class="son"></div>
   </div>
</body>

效果
在这里插入图片描述

这就是利用BFC区域的特性解决了浮动的问题

盒子嵌套关系产生的外边距坍陷的问题

代码实例

<style>
        .son{
            background-color: #FF8500;
            width: 200px;
            height: 200px;
            margin-bottom: 50px; /*同一个BFC区域相邻的盒子会发生外边距重合的问题*/
         
        }
        .son2{
            background-color:#4182FA;
            width: 200px;
            height: 200px;
            margin-top: 100px;  /*同一个BFC区域相邻的盒子会发生外边距重合的问题*/
        }
        .father{
            border: 1px solid #9a6e3a;
            width: 400px;
          float: left; /*父盒子属于BFC区域*/
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
       <div class="son2"></div>
    </div>
</body>

效果
在这里插入图片描述

上面的盒子一个 50的下边距，下面的盒子一个100的上边距那么盒子之间应该有150px的间距，那么如图为什么只有100px的间距，这就是外边距塌陷的问题，当发生外边距塌陷的时候以大的数值为准，因此就是100px

**解决办法：****盒子间距离由外边距决定，同一个BFC的盒子相邻的外边距会发生重叠（外边距合并的问题）那么我们让相邻盒子不属于同一个BFC区域就可以了

代码

    <style>
        .son{
            background-color: #FF8500;
            width: 200px;
            height: 200px;
            margin-bottom: 50px; /*同一个BFC区域相邻的盒子会发生外边距重合的问题*/
           /*浮动脱离文档流不占位置父亲就获取不到子元素的高度此时父亲高度为0*/
        }
        .son2{
            background-color:#4182FA;
            width: 200px;
            height: 200px;
            margin-top: 100px;
        }
        .father{
            border: 1px solid #9a6e3a;
            width: 400px;
            float: left; /*块级元素加上浮动会触发BFC区域，BFC可以获取到浮动元素的高度，利用这个特性解决的获取不到浮动元素的高度问题*/
        }
        .other{
            float: left; /*不同的BFC区域就不会产生外边距合并的问题*/
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="other"><div class="son2"></div></div>
    </div>
</body>

我们给第二个子盒子套上一个父元素，让第二个子元素属于另一个BFC区域，两个子盒子属于的BFC区域不一样，就不会产生外边距塌陷的问题；

效果

在这里插入图片描述