bfc的区域不会与float的元素区域重叠是什么意思

发布网友 发布时间：2022-03-31 00:13

我来回答

共3个回答

热心网友 时间：2022-03-31 01:42

<div>元素A</div>
<div>元素B</div>

代码效果如图

当你元素A添加float属性后，元素A脱离文档流。这个应该知道吧？

正常情况下，后面元素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;

  于是元素B 产生了BFC效果导致元素B收缩，不在占据元素A位置，如图

这个最好自己打代码就懂了，言语上面去讲很难理解，要结合操作。

热心网友 时间：2022-03-31 03:00

　BFC的生成

　　既然上文提到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(块格式化上下文)