前端多个圆圈均匀横向排列_web前端入门到实战：BFC块级格式上下文详解

1.BFC简要定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，它规定了内部如何布局，是决定块盒子的布局及浮动相互影响范围的一个区域，并且与这个区域外部毫不相干。

2.BFC创建方式

• 根元素或其它包含它的元素；
• 浮动 (元素的float不为none)；
• 绝对定位元素 (元素的position为absolute或fixed)；
• 行内块inline-blocks(元素的 display: inline-block)；
• 表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
• overflow的值不为visible的元素；
• 弹性盒 flex boxes (元素的display: flex或inline-flex)

3.BFC内部特性

• 内部的盒会在垂直方向一个接一个排列(可以看作BFC中有一个的常规流)；
• 处于同一个BFC中的元素相互影响，可能会发生margin collapse；但不同BFC可以阻止margin collapse
• 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
• 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
• 浮动盒区域不叠加到BFC上；

4.BFC应用实例

1.BFC清除浮动

将父元素设置一个能让其变为BFC区域的属性，不如overflow：auto

web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法(详细的前端项目实战教学视频，PDF) Title

one

two

2.BFC处理margin collapse

在CSS中，两个或多个毗邻的普通流中的盒子(可能是父子元素，也可能是兄弟元素)在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。这里讲解父子元素，兄弟元素同理。

 Title

aaaaaaaaaaaaaa

bbbbbbbbbbbbbb

web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法(详细的前端项目实战教学视频，PDF)

BFC改造后