BFC原理与应用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41033258/article/details/123764997

一、什么是BFC

块格式化上下文（Block Formatting Context，BFC） 
Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，
也是浮动元素与其他元素交互的区域.

二、什么情况下会触发BFC

 1. 根元素（<html>）
 2. 浮动元素（元素的 float 不是 none）
 3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
 4. 行内块元素（元素的 display 为 inline-block）
 5. 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
 6. 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
 7. 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、tableheader-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
 8. overflow 计算值(Computed)不为 visible 的块元素
 9. 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素)

三、应用场景

实际开发中，我们通常用BFC解决一下问题：
 1. 外边距重叠
 2. 清除浮动

四、代码示例

1.解决外边距重叠

    <div class="box1"></div>
    <div class="box1"></div>

    .box1 {
            width: 100px;
            height: 100px;
            margin: 50px;
            background-color: red;
        }

我们给每个盒子都设置了margin：50px，按理说，两个盒子之间的距离应该是100px，然而实际上，两个盒子的距离是50px
原因：块的margin-top和margin-bottom会合并为单个边距，其大小为单个边距的最大值

在这里插入图片描述

解决办法：将其中一个盒子包裹在box容器中，并用overflow：hidden触发box的BFC
    <div class="box1"></div>
    <div class="box">
    <div class="box1"></div>
    </div>

.box {
            overflow: hidden;
        }
.box1 {
            width: 100px;
            height: 100px;
            margin: 50px;
            background-color:lightblue;
        }

在这里插入图片描述

2.清除浮动

    <div class="box">
        <div class="box1"></div>
    </div>

        .box {
            border: 5px solid red;
            margin: 200px;
        }
        .box1 {
            width: 100px;
            height: 100px;
            margin: 50px;
            background-color: lightblue;
            float: left;
        }

按理说我们应该看到的是红色边框包裹着一个蓝色方块，然而实际上父容器高度塌陷
原因：子容器设置了浮动，使其脱离了文档流导致父容器高度塌陷

在这里插入图片描述

解决办法：给父容器设置overflow：hidden属性，触发BFC
    <div class="box">
        <div class="box1"></div>
    </div>

    .box {
            border: 5px solid red;
            margin: 200px;
            overflow: hidden;
        }

在这里插入图片描述

五、总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

CSS-BFC

一、什么是BFC

二、什么情况下会触发BFC

三、应用场景

四、代码示例

1.解决外边距重叠

2.清除浮动

五、总结