BFC块级格式化上下文

BFC 块级格式化上下文
是一块独立渲染区域，内部元素的渲染不会影响外部的元素。
1. BFC的形成
（1）float不是none;
（2）position是absolute或fixed;
（3）overflow不是visivle;
（4）display是flex或inline-block
2. BFC的作用
（1）BFC内部元素的布局不会受外部元素影响；
（2）BFC区域不会出现margin重叠；
（3）BFC区域计算高度时会计算浮动元素；
（4）BFC区域不会和浮动元素重和。
3. 使用场景
（1）清除元素内部浮动；
父元素没有设置高度，而其子元素均为浮动元素，父元素则发生高度塌陷（一条直线），父元素下方元素则顺势向上
效果如下图：

加上BFC（overflow:hidden;）

  .father1 {
            border: 1px solid black;
            overflow: hidden;
        }
        
        .son1 {
            height: 100px;
            width: 100px;
            background-color: rgb(27, 189, 154);
            float: left;
        }
        
        .bottom1 {
            height: 200px;
            width: 200px;
            background-color: rgb(99, 97, 240);
        }
        
<!-- 清除元素内部浮动 -->
    <div class="father1">
        <div class="son1"></div>
    </div>
    <div class="bottom1"></div>

效果如下图：浮动元素撑开了父元素

（2）防止出现margin重叠；
兄弟类型margin边距重叠：

解决办法：可以为任意一个盒子设置display: inline-block;

 .content {
            height: 200px;
            width: 200px;
            background-color: rgb(99, 97, 240);
            margin-bottom: 30px;
            /* 形成BFC */
            display: inline-block;
        }
        
        .bottom {
            height: 200px;
            width: 200px;
            background-color: rgb(24, 130, 172);
            margin-top: 30px;
        }
        
	<div class="content">content</div>
    <div class="bottom">bottom</div>

父子类型margin边距重叠：子元素具有上边距，父元素和子元素外边距重叠了，子元素和父元素都往下移动。
效果：

解决办法：父元素设置overflow: hidden;或者float:left 使其开启BFC,即可消除外边距重叠问题。

 .father {
            height: 200px;
            width: 200px;
            background-color: rgb(24, 172, 110);
            overflow: hidden;
        }
        
  .son {
        height: 100px;
        width: 100px;
        background-color: rgb(24, 143, 172);
        margin-top: 30px;
    }

<div class="father">
        <div class="son"></div>
    </div>

（3）两栏布局，防止出现环绕文字效果。
如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏三栏布局就是这么做的。

 .left {
            height: 100px;
            width: 100px;
            background-color: rgb(24, 143, 172);
            float: left;
        }
        
        .right {
            height: 200px;
            width: 200px;
            background-color: rgb(24, 172, 44);
        }
	 <div class="left">left</div>
    <div class="right">right</div>

可以给未浮动的元素加 overflow: hidden，触发bfc来解决遮挡问题。

 .left {
            height: 100px;
            width: 100px;
            background-color: rgb(24, 143, 172);
            float: left;
        }
        
        .right {
            height: 200px;
            width: 200px;
            background-color: rgb(24, 172, 44);
            overflow: hidden;
        }
        
	<div class="left">left</div>
    <div class="right">right</div>