一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情

前情介绍

前几天看到一个面试题，要求是实现一个两栏布局，左栏宽度固定，右栏自适应，我第一时间想到的是flex布局或者grid布局。着丰富知识的目的，在网上查了一下，有个答案是左侧float，右侧BFC。此时我内心无数疑惑，BFC是什么？难道又出现新的布局方式了吗？

BFC是什么

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

这是MDN对BFC的中文解释，看起来比较抽象。初学者学习页面布局的时候会学到页面有一个个"盒子",而BFC就类似一个独立的盒子，盒子内的布局不会影响盒子外的布局。

如何创建BFC

触发BFC的特性有很多，这里只列举一些常见的，如果想要了解更多可以去MDN进行更深入的学习。

html根元素（这个需要注意）
浮动元素：float的值不是none
绝对定位元素（absolute、fixed）
isplay为inline-block（行内块）、flex、table-cells（表格单元格）、grid等
overflow的值不是visible

BFC的作用

避免margin重叠（在刚学的时候踩了好多坑，以前只知道给一个元素定margin，万能堆盒子）

<div class="blue"></div>
<div class="yellow"></div>

.blue,
.yellow {
    height: 100px;
    width: 100px;
}

.blue {
    background-color: rgb(66, 207, 242);
    margin-bottom: 20px;
}

.yellow {
    background-color: rgb(251, 255, 9);
    margin-top: 20px;
}

我们想要的是上下各20px的margin，加一起应该是40px。但是浏览器显示只有20px，这就涉及到BFC的布局规则：属于同一个BFC的两个相邻box会发生margin重叠。大家可能觉得并没有把box设为BFC，这是因为忽略了前面提到的html根元素。

<div class="overflow">
    <div class="blue"></div>
</div>

<div class="overflow">
    <div class="yellow"></div>
</div>

.overflow {
    overflow: hidden;
}

这时候就可以看到改进后的效果

自适应两栏布局（避免元素被覆盖）

<div style="height: 100px;width: 100px;float: left;background: lightblue"></div>
<div style="width: 200px; height: 200px;background: rgb(230, 146, 146);overflow: hidden"></div>

在右侧元素上加overflow: hidden避免元素被浮动元素覆盖

清除浮动

起因：浮动的元素会脱离普通文档流

<div style="border: 1px solid black;">
    <div style="height: 100px;width: 100px;background-color: rgb(178, 127, 226);float: left;"></div>
</div>

<div style="border: 1px solid black;overflow: hidden">
    <div style="height: 100px;width: 100px;background-color: rgb(178, 127, 226);float: left;"></div>
</div>

结语

苟日新日日新

欢迎大家交流共同学习！

左侧float，右侧BFC，什么是BFC？

前情介绍

BFC是什么

如何创建BFC

BFC的作用

结语