理解BFC

清渡ovo
53 阅读3分钟

1、什么是BFC

BFC - Block Formatting Context 块级格式化上下文

BFC的定义，在官方文档到中是这么介绍的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。

2、实现BFC的方式

·body根元素

·设置浮动，不包括none
·弹性布局，flex ·设置overflow，即hidden，auto，scroll
·设置定位，absoulte或者fixed
·行内块显示模式，inline-block
·表格单元格，table-cell

3、BFC的作用

现在知道了怎么实现BFC，接下来我们就来聊聊它的作用。

根据上面的描述，BFC区域有一个特点，那就是独立。不会影响外部元素。根据这个特性就能解决很多布局问题。

1，解决外边距的塌陷问题(垂直塌陷)

开发中，前端的布局手段，离不开外边距margin，那么，也会遇到一些问题，例如外边距的垂直塌陷问题。

`<style> 
.HM { 
    background: red; 
    width: 200px; 
    height: 200px;
    margin: 100px; 
} 
</style> 
<body> 
    <div class="HM"></div> 
    <div class="HM"></div> 
</body>`

f1c2729e2c6a21a726439fb22df6285.png

两个p之间的距离为100px，发送了margin重叠。根据BFC布局规则第二条：

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

我们可以在div外面包裹一层容器，并触发该容器生成一个BFC。那么两个div便不属于同一个BFC，就不会发生margin重叠了。 效果如下

image.png

2，利用BFC解决包含塌陷

有时候我们给子元素加margin可能会带着父元素一起跑

image.png

很显然，我们只是想要子元素距离父元素50px，而不是整个父元素都一起跑。这个时候用padding可以解决问题，但是用BFC同样可以解决

只需要将父元素变为BFC区域，就能得到解决

image.png 因为将父盒子变成一个独立的区域，这样在BFC区域内部的任何操作，都不会影响到外部

3.清除浮动。

大家都知道，浮动会导致父元素高度塌陷，那大家还记得怎么清除浮动吗？相信很多人都知道：overflow：hidden嘛。相信在认识BFC之前大家肯定不太清楚为什么overflow：hidden可以清除浮动。现在知道了，BFC区域内的子元素任何边动都是不会影响到外部元素的。所以BFC区域同样可以清除浮动带来的影响。这里就不上例子了

4.BFC可以阻止标准流元素被浮动元素覆盖

大家都知道，浮动的元素会脱离文档流，跑到上一个层面，也就是和原本的元素们不在一个层面了。所以可能会导致浮动元素覆盖基本元素的问题。

image.png

那么这个时候我们只需要让蓝色区域触发BFC，就可以做到不受浮动元素影响

image.png

而且还能利用这个特性，来实现蓝色盒子宽度根据红色盒子的宽度来做自动适应。怎么样，是不是很神奇。

最后总结一下：

一个BFC区域只包含其子元素，不包括其子元素的子元素。 并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。 不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。

————————————————————————————————————————————————

原文链接：blog.csdn.net/sqLeiQ/arti…

avatar
文章
阅读
粉丝