摘要：在一个中，两个相邻的块级盒子的垂直会产生合并。对于从右到左的格式来说，则触碰到右边缘。正常人类的理解上面个什么瘠薄，看不懂。
BFC是什么? W3C这么说
在W3C规范中的BFC是这样定义的：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如，inline-block、table-cells和table-captions），以及overflow值不为visiable的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin值所决定的。在一个BFC中，两个相邻的块级盒子的垂直margin会产生合并。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）。对于从右到左的格式来说，则触 碰到右边缘。
MDN这么说块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
上面2个什么瘠薄，看不懂。
通俗来说，bfc就是一个盒子,里面的子元素不论发生什么，都不会影响到外面,龙珠看过吗,魔封波了解一下。我不能告诉你BFC是什么，但是你可以一看到就知道这是一个BFC。
抄袭一下mdn对触发BFC的定义
根元素或包含根元素的元素
浮动元素（元素的 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的情况上面的太长，我猜你也记不住,来个低配版的
html根元素
浮动元素，float不是none就行
绝对定位元素，absolute和fixed
display不是block的块(inline-block、table-cell、table-caption)
overflow 值不为 visible 的元素(hidden、auto、scroll)
display:flex、grid、 flow-root
why？为什么我要出发BFC要改其他东西,我不能display:BFC吗？然后w3c终于领悟了,推出了display:flow-root,这个属性的作用就是把元素变成BFC元素，没有其他副作用，仅此而已。NICE，马飞！
BFC有什么用？ 你爹最牛比不要用BFC清楚浮动，因为bfc有其他副作用，除非display:flow-root所有浏览器都支持了
里面的子元素，不管你是浮动也好还是怎么样，你都逃不出边界(包裹住浮动元素),有一种情况除外。
假设我有3个元素，从上到下嵌套
如果爷爷和爸爸都触发了BFC，那么爷爷将管不住儿子，很好理解，你娃儿都当爸爸了，你儿子自己管。
亲兄弟，明算帐让两个兄弟元素界限分明,不越界
.哥哥{
float:left;
height:400px;
width:200px;
border:2px solid red;
}
.弟弟{
height:400px;
border:5px solid green;
}
让我们触发BFC
.哥哥{
float:left;
height:400px;
width:200px;
border:2px solid red;
}
.弟弟{
height:400px;
border:5px solid green;
display:flex;
}
总结
BFC是一个时代的产物,总觉得高大上,仔细了解后发现,BFC也没什么卵用,BFC能做到的,用其他方法一样能做到,还没有副作用。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115847.html
摘要：而不会因为高度塌陷而被隐藏在内部浮动的子元素下。若果不考虑的高度塌陷问题，直接在其弟元素处设置属性即可。开始我误认为了是将中的内容插入至被选元素的弟元素位置上。中的示例从这个示例可以看出，伪类内容的默认方式应该为内联。 1. 引子 前段时间学习 web 布局的时候，因为要用浮动 float 属性，所以就顺理成章地碰到了清除浮动 clear 属性。教学的案例中是用新建一个空的 div ...
摘要：相邻的兄弟元素相邻的两个兄弟元素之间的外边距会塌陷。块级父元素与其第一个最后一个子元素如果块级父元素中，上边框宽度及上内边距距离为时，此时这个块级父元素和其第一个子元素就会发生上外边距合并现象。 盒模型 在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。 在标准模式下，一个块的总宽度=...
摘要：相邻的兄弟元素相邻的两个兄弟元素之间的外边距会塌陷。块级父元素与其第一个最后一个子元素如果块级父元素中，上边框宽度及上内边距距离为时，此时这个块级父元素和其第一个子元素就会发生上外边距合并现象。 盒模型 在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。 在标准模式下，一个块的总宽度=...
摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...
阅读 2970·2021-09-22 15:18
阅读 3393·2019-08-30 15:54
阅读 3272·2019-08-30 15:53
阅读 587·2019-08-30 14:12
阅读 812·2019-08-29 17:01
阅读 2197·2019-08-29 14:04
阅读 1377·2019-08-29 13:09
阅读 859·2019-08-26 17:40
