关键词：
一、BFC元素简介与基本表现。
BFC全程"Block Formatting Context",中文为"块级格式化上下文"。记住一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻雨覆雨都不会影响外部的元素。所以，避免margin穿透、清楚浮动什么的也就好理解了。
什么时候出发BFC呢？ 常见的情况如下：
-> float 的值不为none ;
-> overflow 的值为auto,scroll或hidden;
-> display的值为table-cell，table-caption,inline-block中的任何一个;
-> position的值不为relative 和 static。
BFC特性很多,儿我们这里只关心一个，和float元素做相邻兄弟时候的表现。
会发现，普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。
同时，元素原本的流体特性依然保留了。哈，这个很重要，也就是，虽然不与浮动交集，自动退避浮动元素宽度的距离，但，本身作为普通元素的流动性依然存在，反映在布局上就是自动填满除去浮动内容以外的剩余空间。哟，这不就是自适应布局嘛！
二、BFC自适应布局木块间的间距
说到间距，我们的第一反应就是margin. 于是，我们给BFC元素增加一个margin-left:20px, CSS代码如下：
.float-left {
float: left;
}
.follow-content {
margin-left: 20px;
background-color: #cad5eb;
overflow: hidden;
}
结果……纳尼~
怎么还是像狗屁膏药贴在一起啊？？
实际上，这里的margin并不是无效，而是值不够大，鞭长莫及啊！
如果按照上面的解释，那我们把margin-left:20px改成margin-left:150px就应该有间距了？
一试便知！
.float-left {
float: left;
}
.follow-content {
margin-left: 150px;
background-color: #cad5eb;
overflow: hidden;
}
注意：我这里举margin这个例子，不是让大家这样使用，只是为了让大家可以深入理解BFC元素与浮动元素混排的特性表现。实际开发，我们完全没有必要对BFC元素设置margin, 因为又回到了流体布局，明明是固定的15像素间距，但是，每个布局都要写一个不同的margin值，完全没有重用价值。
但是，间距部分的高潮来了！
我们可以使用浮动元素的margin-right或者padding-right轻松实现间距效果。间距是20像素，直接：
.float-left {
float: left;
margin-right: 20px;
}
与浮动元素的宽度是多少没有任何关系。不仅如此，我们还可以使用BFC元素的padding-left撑开间距（虽然margin-left作用鸡肋）。
三、与纯流体特性布局的优势
BFC自适应布局优势我总结了下面2点：
1、自适应内容由于封闭，更健壮，容错性强。比方说：内部clear:both不会与兄弟float产生矛盾。而纯流体布局，clear:both会让后面内容无法和float元素在一个水平上，产生问题。布局
2、自适应内容自动填满浮动区域，无需关心浮动元素宽度，可以整站大规模应用。而纯流体布局,需要大小不确定的margin/padding等值撑开合适间距,无法CSS组件化。
图片能大能小，布局依然良好
圣杯双飞翼布局多栏自适应布局bfc(代码片段)
...布局CSS深入理解流体特性和BFC特性下多栏自适应布局块状元素的流体特性。图片宽度一直width:100%，结果随着margin, padding, border的出现，其可用宽度自动跟着减小，形成了自适应效果。就像放在容器中的水流一样，内容区... 查看详情
bfc自适应布局
...格式化上下文。它是一个独立的渲染区域。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系。 块级元素：父级（是一个块元素） 内容：子元素（是一个... 查看详情
520，自适应布局的思路（待补充）
...干。bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此，包括浮动和外边距合并等等，有了这些特性我们布局的时候就不会出现意外了情况了。哪些情况下会产生bfcdisplay属性为block，... 查看详情
两栏布局——左侧固定右侧自适应
...A1、左边width:200px;右边width:calc(100%-200px)；2、flex布局：父元素使用display:flex；子固定元素设置min-width即可3、grid布局：父元素 display:grid;grid-template-columns:60px300pxauto;4、左元素浮动（BFC）1）右侧元素添加margin-left，值为左侧元素... 查看详情
理解bfc
1、BFC块级格式化上下文 具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。2、满足一下条件即可触发BFC body根元素 浮动元... 查看详情
bfc的特性及使用场景
...生折叠，不同BFC不会发生折叠 2.BFC的区域不会与浮动元素的区域重叠 3.BFC的高度包含浮动子元素的高度 4.BFC在页面上是一个独立的容器，里外 查看详情
html百分比布局缩放自适应
...侧自适应-定位步骤:左侧宽度写死——》定位——》给父元素设置左padding即可右侧宽度不用设置(自适应)2.浮动+触发BFC拓展:想详细了解BFC戳这里overflow:hidden会触发盒子的BFC触发BFC的盒子的特点:解决margin的塌陷清除浮动... 参考技... 查看详情
布局中的bfc---重点是前言
...很模糊。问了一下度娘，看到张鑫旭的《CSS深入理解流体特性和BFC特性下多栏自适应布局》。呀，原来是这东东啊。BFC应该是前端的基础知识，也许很多前端er工作中经常用到，但是未必真的归纳总结过（自己躺枪），反正能完... 查看详情
bfc
...个BFC的两个相邻Box的margin会发生重叠； 3）每个元素的marginbox的左边，与包含块borderbox的左边相接触； 4）BFC的区域不会与floatbox重叠； 5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影... 查看详情
bfc是什么？bfc有什么用？看完全明白(代码片段)
...染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。详见MDN看不明白？那就对了！官方解释若不搞得抽象难懂些，怎能显出高大上？！（手动滑稽）还是让逆战在新冠疫情期的我来给你解答吧！... 查看详情
什么是bfc
...个区域外部毫不相干。BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列BFC的布局规则内部的Box会在垂直方... 查看详情
bfc
...邻Box的margin会发生重叠（按照最大margin值设置）三、每个元素的marginbox的左边，与包含块borderbox的左边相接触四、BFC的区域不会与floatbox重叠。五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素... 查看详情
bfc与浮动元素的关系
首先说明两个特性：1，浮动元素兄弟元素的布局规则当html中存在浮动元素时，其兄弟元素的布局遵循如下规则：（1）块级元素的渲染无视浮动元素（2）文本内容或者是行内元素的渲染会考虑到浮动元素的存在形象一点来讲就... 查看详情
圣杯布局（定宽与自适应）
阅读目录1.从2个实际的需求说起2.圣杯布局的传统实现方法3.圣杯布局传统实现方法的一种变体4.圣杯布局的纯浮动实现5.圣杯布局的flex实现7.结束语圣杯布局，很久之前就听过，但是一直都没详细了解过，最近因为做了一个项目... 查看详情
前端css必知：bfc及其触发条件(代码片段)
...作右侧自适应盒子4.bfc布局规则特性：5.两栏布局6.块元素高度不设或宽度不设的情况。将本人好久之前的云笔记搬到博客上来，统一维护。1.bfc的理解（块级格 查看详情
布局和bfc
块级格式化上下文BFC是W3CCSS2.1规范中的一个概念，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。目前除了IE6-7外其他浏览器均支持BFC。在CSS3中BFC叫做FlowRoot。与普通容器相比，BFC元素可以看作是隔离了... 查看详情
css之bfc
BFC（BlockFormattingContext，块格式上下文）具有BFC特性的元素能够看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。在CSS3中。BFC叫做FlowRoot。在CSS2.1中。有三种定位方案——普通流（NormalFlow），浮动（Floa... 查看详情
关于bfc(代码片段)
...是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC（行级格式化上下文），还有GFC（网格布局格式化上下文）和FFC（自适应格式化上下文），这里就不... 查看详情