JS每日一题:如何理解CSS中BFC?

我就是我 2023-02-13 08:16 7阅读 0赞

#### 20190416期 ####

如何理解CSS中BFC?

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

##### BFC 特性及应用 #####

*  同一个 BFC 下外边距会发生折叠

代码理解

*  BFC 可以包含浮动的元素(清除浮动）

我们都知道，浮动的元素会脱离普通文档流，来看下下面一个例子

// 由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素
    <div style="border: 1px solid #000;">
        <div style="width: 100px;height: 100px;background: red;float: left;"></div>
    </div>
    // 下面我们将其清除浮动触发BFC,将可包裹浮动元素
    <div style="border: 1px solid #000;overflow:hidden">
        <div style="width: 100px;height: 100px;background: red;float: left;"></div>
    </div>

*  BFC 可以阻止元素被浮动元素覆盖

这里有一个经典的css布局试题(两列自适应布局)就是应用的BFC特性

<div style="float:left; width:200px; background:blue">left</div>
      <div style="height:100%; background: red">right</div>

#### 触发BFC ####

下列方式会触发BFC(摘抄自MDN)

*  根元素或包含根元素的元素
 *  浮动元素（元素的 float 不是 none）
 *  绝对定位元素（元素的 position 为 absolute 或 fixed）
 *  行内块元素（元素的 display 为 inline-block）
 *  表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
 *  表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
 *  匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
 *  overflow 值不为 visible 的块元素
 *  display 值为 flow-root 的元素
 *  contain 值为 layout、content或 strict 的元素
 *  弹性元素（display为 flex 或 inline-flex元素的直接子元素）
 *  网格元素（display为 grid 或 inline-grid 元素的直接子元素）
 *  多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
 *  column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

#### 总结 ####

BFC概念很多同学都没有什么概念，不知道为什么需要清除浮动,margin重叠等等系列骚操作,看完这篇我想应该有个大概了

再来回顾一个BFC的特性

*  同一个 BFC 下外边距会发生折叠
 *  BFC 可以阻止元素被浮动元素覆盖
 *  BFC 可以包含浮动的元素(清除浮动）

####     ####

**最近答题**

[JS每日一题:设计模式-如何理解工厂模式?][JS_-]

[JS每日一题:设计模式-如何理解命令模式?][JS_- 1]

基友噢如果喜欢，可以分享给好基友噢如果喜欢，可以分享给好基友噢

**关注「JS每日一题」，参与答题！**

![format_png][]

▲长按图片识别二维码

[JS_-]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c398cb674a8e7907320284f63b1514c28bb0c22de41359bed4aaade01d5080e4a1b8ff1f&idx=1&mid=2247483854&scene=21&sn=f810de019cfbc269f7e08ad9ccf2454e#wechat_redirect
[JS_- 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c387cb674a912ab4d19a038533db912c4b9d041631a3f27c989ae1cd2cd3ef5f1634aa57&idx=1&mid=2247483857&scene=21&sn=260b775e88dd97a3508fa7ae232834f7#wechat_redirect
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9nSDMxdUY5VklpYlRQUFY1ZlVpYzhKb2ljVGxISDByTDdpY1p5alJaMThDSmpsN2hUaDFvcWpRRnNBbDI3YWljV1NmRDJ6WnVLT1d1b01pY0VpY3oxV3dBSjlhY2cvNjQw?x-oss-process=image/format,png