bfc的区域不会与float的元素区域重叠是什么意思
发布网友
发布时间：2022-03-31 00:13
共3个回答
热心网友
时间：2022-03-31 01:42
<div>元素B</div>
代码效果如图
当你元素A添加float属性后，元素A脱离文档流。这个应该知道吧？
<div style='float:left;'>元素A</div><div>元素B</div>
正常情况下，后面元素B会与前面的元素A重叠（因为float导致A元素脱离文档流不再占据原来的位置，后面元素会占据前面的位置，如图）
元素产生BFC的原因{
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
}
这个时候，我们任意选取上面一种原因加给元素B，比如加上overflow:hidden;
<div style='float:left;'>元素A</div><div style='overflow:hidden;'>元素B</div>
于是元素B 产生了BFC效果导致元素B收缩，不在占据元素A位置，如图
这个最好自己打代码就懂了，言语上面去讲很难理解，要结合操作。
热心网友
时间：2022-03-31 03:00
既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
看到有道友文章中把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC
BFC的约束规则
浏览器对于BFC这块区域的约束规则如下：
生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。
有道友对它做了分解，我们直接拿来：
内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
看到以上的几条约束，让我想起学习css时的几条规则
Block元素会扩展到与父元素同宽，所以block元素会垂直排列
热心网友
时间：2022-03-31 04:35
一、BFC的概念
1.规范解释
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
2.通俗理解
BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
浮动元素会创建BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。
阅读全文：前端面试题-BFC(块格式化上下文)
