一、BFC
1、定义：
先给一个官方的定义：（可能会看不懂我也不懂）
Formatting context(格式化上下文) 是 W3C CSS2.1规范中的一个概念。每个渲染区域用formattingContext表示，它是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
再看下面这个定义：（一点点懂）
BFC（Block Formatting Context），块级格式化上下文。相当于制定一种如BFC这样的规则，在普通流中按照该规则进行布局。
在正常流中的盒子要么属于块级格式化上下文（BFC），要么属于内联格式化上下文，即块级元素在页面渲染的时候遵循怎么样的规则，它们之间有怎么样的作用。
再看这个：（还是一点点懂）
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
总结：BFC没有定义，只有功能或特性
2、BFC会在哪里产生（官方的）
只要元素满足下面任一条件即可触发 BFC 特性
（1）body根元素
html里的根元素产生相应的“块级格式化上下文”这类的规则，如某些规则：块级容器可以充满父容器，父容器可以被子元素撑开，外边距产生合并，渲染顺序是从上到下（同一个块级格式化上下文中相邻块级盒之间的竖直margin会合并）
（2）浮动元素：float除了none以外的值；
如float:left; 该元素属性本身也产生了相应的块级格式化上下文。该元素产生的BFC与所在的根元素的BFC互不影响，此元素的作用域，则为该元素服务，与根元素产生一个隐形的边界
（3）绝对定位元素：position为absolute或fixed；
（4）display为inline-block（非块盒的块容器）, flex, 或inline-flex；
（5）overflow除了visible以外的值（hidden、auto、scroll）
3、应用
这里的例子截取自该文章：
（1）功能1：
让两个相邻的元素界限分明（同一个 BFC 下外边距会发生重叠或合并）
image
代码如下：
<head>
div{
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
</head>
<div></div>
<div></div>
从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有100px，而不是 200px。
如图：
image
首先这不是 CSS 的bug，我们可以理解为一种规范。如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
<div class="container">
<p></p>
</div>
<div class="container">
<p></p>
</div>
<style>
.container {
overflow: hidden; ✔️
}
p {
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
</style>
这时候，两个盒子边距就变成了 200px ，
如图：
image
（2）功能2：
子元素被父元素包裹起来（BFC可以包含浮动的元素）（可代替clearfix来清除浮动）
-
display:flow-root;让当前元素触发BFC（正交，考虑浏览器兼容） -
overflow:hidden;将溢出隐藏浮动的元素会脱离普通文档流，
来看下下面一个例子，代码如下：
<style>
.father{
border: 1px solid #000;
}
.son{
width: 100px;
height: 100px;
background: #eee;
float: left;
}
</style>
<div class=father>
<div class=son></div>
</div>
image
由于父元素（father）内子元素（son）进行浮动，脱离了“父亲”的文档流，所以容器只剩下 2px 的边距高度。此时可以触发容器的 BFC，那么“father”就可以包裹住“son”出去的浮动元素。
<style>
.father{
border: 1px solid #000;
overflow:hidden; ✔️
}
.son{
width: 100px;
height: 100px;
background: #eee;
float: left; ✔️
}
</style>
<div class=father>
<div class=son></div>
</div>
image
（3）功能3：
BFC 可以阻止元素被浮动元素覆盖
先来看一个文字环绕效果，代码如下：
<style>
.box1{
height: 100px;
width: 100px;
float: left;
background: lightblue;
}
.box2{
width: 200px;
height: 200px;
background: #eee;
}
</style>
<div class=box1>我是一个左浮动的元素</div>
<div class=box2>我是一个没有设置浮动, 也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
image
此时，浮动元素浮在第二个元素上，第二个元素有部分区域被浮动元素所覆盖(但文本信息不会被浮动元素所覆盖) 。如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入overflow: hidden； 或者 display: flow-root;
<style>
.box1{
height: 100px;
width: 100px;
float: left; ✔️
background: lightblue;
}
.box2{
width: 200px;
height: 200px;
background: #eee;
overflow:hidden; ✔️
/*或 display: flow-root; */ ✔️
}
</style>
<div class=box1>
我是一个左浮动的元素
</div>
<div class=box2>
我是一个没有设置浮动, 也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;
</div>
就会变成：
BFC 浮动处理
image
用来实现两列自适应布局：即左边宽度固定，如果想右边的内容自适应宽度，可以去掉上面右边内容的宽度（如果右边定宽，窄页面时，则会自动换到下一行排列）
二、边距合并
1、讲例子
案例1：
当实际中希望#header和h1之间产生一点缝隙（或间距），即使将h1设置 margin:50px; ，作为块级元素的h1，margin左右生效，而上下则是#header+h1整体向下移动50px
这便是，外边距合并
image
案例2：
image
看案例似乎是
<h1>和<p>标签所设置的外边距各30px，两者之间的间距理论来讲应该是60px，但事实上这是两个相邻元素的外边距产生合并，下边距<margiin-bottom>和上边距<margin-top>合并之后取较大值，这里为30px这也是，外边距合并
2、合并场景
（1）相邻元素合并
同案例2
（2）父子合并
h1和header，或者再嵌套元素或者与其的祖先元素嵌套，均能产生外边距合并，这些都能称之为“父子合并” ,如图：
image
（3）自己合并
如图，块级元素合并，无默认样式即靠在一起；含有p标签（含内容）的块级元素，则有默认上下margin，所以detail和footer则会产生缝隙（或间距）
image
image
.footer元素为空内容，设置 margin:30px; ，即说明上边距和下边距合并后的外边距总值是60px，不过.footer元素为空内容，所以页面效果仍然呈现30px，说明css元素中外边距合并的另一种情况：
自己和自己合并：如图，
image
三、取消合并（如何去解决外边距合并？）
1、边框、padding
存在于父子合并
为何#header和h1能够产生合并？即#header没有border和padding（即一个可与外界隔离的边界线），导致h1自带的一个margin，冲出该边界，与#header合并
尝试在#header里添加边框（图1）或者加padding（内边距）（图2），让#header和h1的margin-top，内外分开，即能做到不让外边距合并，如图：
图1
图2
2、BFC
如何让一个元素生成bfc？bfc可认为是拥有一片独立的空间，和其他的空间（或其他的文档流）区别开。注：添加bfc元素属性，可以取消合并有可能产生副作用
（1）父子元素不产生合并
A、添加：overflow:hidden；
image
B、添加 ：float:left;
image
C、添加： display:inline-block;
image
D、添加： position:absolute;
image
（2）相邻元素不产生合并
A、添加：浮动元素
image
B、添加：overflow:hidden；
生成BFC，相当于生成了一个边界，即边框作为一个边界，有了边界之后，#header+h1父子元素便不能冲破该边界，自然与#detail元素的不产生合并.
image
【重点】：
而相邻元素之间的margin，可以认为不是该父子元素边界内，同样会产生合并。
通常处理相邻元素之间的间距合并问题（除浮动外，浮动时不会被合并），即不考虑合并问题，直接设置为：margin-top:___px;
网友评论