【CSS基础—No.01】块级格式化上下文BFC

谈谈BFC吧，最近面试经常问，这点内容感觉自己答得总是不那么顺畅。

一、定义：

块级格式化上下文，可以理解为一个容器，这个容器内的物品不会被其他容器影响，也不会影响其他容器。

如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

二、触发条件：

• 根元素：body；

• 元素设置浮动：float 除 none 以外的值；

• 元素设置绝对定位：position (absolute、fixed)；

• display 值为：inline-block、table-cell、table-caption、flex等；

• overflow 值为：hidden、auto、scroll；

三、应用场景：

下面的栗子都是使用 overflow:hidden 解决一些问题

1.解决margin的重叠问题：👉【CSS基础—No.02】margin高度塌陷问题

由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。

2.解决高度塌陷的问题：

子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。把父元素变成一个BFC（给父元素设置overflow:hidden）。

3.创建自适应两栏布局：

左边的宽度固定，右边的宽度自适应。左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠。

<style>
 .left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }
</style>

<div class="left"></div>
<div class="right"></div>

🚗 参考文章

「2021」高频前端面试题汇总之CSS篇  作者：CUGGZ