块级格式化上下文(Block Formatting Context)

BFC: 它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。

应用

1. 自适应的左右两栏布局(浮动元素+BFC)

使用的是第四条规则：BFC的区域不会和float box重叠

     2. 清除内部浮动

使用第六条规则：计算BFC的高度时，浮动元素也参与计算。

一般使用伪元素选择器使用

.clearfix::after{
    content: "";
    display: block;
    clear: both:
}

1. 防止margin重叠

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

我们可以在p外面包裹一层容器，并触发该容器生成一个BFC

生成BFC的元素

1. html根元素
2. 浮动元素和绝对定位元素(float不为none, position为absolute)
3. overflow不为visible
4. display为inline-block、flex、inline-flex、table-cell、table-caption

一般使用overflow: hidden来生成BFC

布局规则

1. 内部的块盒在垂直方向依次放置
2. 同一个BFC垂直方向的的两个相邻box的margin会发生重叠。
3. 每个元素的margin box的左边和包含块border box的左边相接触。即使存在浮动也是如此
4. BFC的区域不会和浮动元素重叠
5. BFC在页面上 是一个隔离的独立容器，容器里面的子元素和外面的元素相互不影响
6. 计算BFC的高度时，也会计算浮动元素。

 

 

总结

上面应用中的例子都体现了第五条规则：

BFC在页面上 是一个隔离的独立容器，容器里面的子元素和外面的元素相互不影响

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。