一篇讲述 BFC 文章的寻根之路

这次要写的东西和标题一致, 就是找一篇文章的来源

首先介绍一下背景, 就着准备春招, 我用 docsify 建了一个静态的知识站点, 然后就开始了大规模的搜索知识, 利用书和网上的文章丰富内容, 这次找到了一篇文章↓

[布局概念] 关于CSS-BFC深入理解

看着点赞数和内容的丰富程度应该是没问题, 稍后再总结一下应该没问题, 然后我就略过去了

当正式仔细看的时候就发现, 结构有点不大对啊, 看这右边的结构, emmm

先忽略了, 然后继续看, 看到了这个, 好像…以前见过

行吧, 应该和我一样是知识总结类型的拼凑文= =, 直接拉到了最下面, 果然有不少参考链接, 随手点了进去

前端精选文摘:BFC 神奇背后的原理

看下面的内容:

BFC布局规则:
内部的Box会在垂直方向,一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时,浮动元素也参与计算

好吧, 很像, 然后我就根据这篇文章继续了, 在看到下部分的内容的时候, 计算高度浮动也在内, 嗯, 实验一下吧

想当然的在 codeopen 里测试了一下, 然而没有计算在内

为什么呢, 所以我谷歌了一下 body 无法设置 bfc, 搜索到了一篇文章

神奇的BFC以及被忽略的东西

开幕就发现了, 嗯, 不只是眼熟的程度, 这不几乎一样吗, 只是内容更加丰富了

好吧, 那就先停一下, 解决一下问题, 原来使用 overflow:hidden 只有块级元素没有扩散到视口才会触发BFC, 我是真的撞得巧🤣, 更巧的是还有中文, 不然我得去Stack Overflow看看了

视口概念

再回过头看下之前的文章

精选文章, 猜一猜应该有来源, 拖到最底下, 找到了

果然有原文来自, 很遗憾, 一点进去, 已经没有该文章了, 看来又是一篇消失在互联网中的文章, 那么搜图走一个

谷歌搜图链接

最后找到了 github.io 上最早的 2015 年的文章, 看了看内容, 嗯, 就是想要的味道, 仔细对比时间, 没想到反倒是之前这篇文章post出来的时间最早, 那么它引用的那篇文章是否就是最早的, 亦或者也引用了其他文章?


也许还有其他手段, 但这包括写文的几十分钟已经消逝掉了, 就先这样吧

文章作者:
文章链接: https://luckyray-fan.github.io/2020/02/27/article-trace-record/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 luckyray