【Toki的前端学习小记】BFC 原理：昨天对面的同事问了一 - Toki - 沸点 - 掘金

页面仔 @ws

【Toki的前端学习小记】BFC 原理：昨天对面的同事问了一个样式的问题，同样的样式作用在一个 for 渲染出来的元素和手写出来的元素出现了不同的效果，具体表现为边距变大。后面经过了解发现了这是一个跟 BFC 相关的问题，于是学习了这个相对陌生的概念。

简单总结一下链接文章的内容：
💡BFC 的概念：BFC 即 Block Formatting Contexts (块级格式化上下文)，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

💡触发 BFC 的方式：
① body元素；
② 浮动元素：float 除 none 以外的值；
③ 绝对定位元素：position（absolute、fixed）；
④ display 为 inline-block、table-cells、flex；
⑤ overflow 除 visible 之外的值（hidden、auto、scroll）

💡BFC 的特性和应用：
① 同一个 BFC 下的元素外边距（margin）会折叠，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中；
② BFC 可以包含浮动元素，参考链接的例子理解；
③ BFC 可以阻止元素被浮动元素覆盖（元素中的文本信息默认不会被浮动元素覆盖），此特性可以用来实现两列自适应布局（例如：左边固定，右边自适应宽度）。

展开

今天学到了

赞过