CSS的 BFC与IFC 解析
1. BFC
-
正常的流中就是如何把文档中的元素呈现出来, 而布局呈现的规则就是 BFC、IFC 和 相对位移, 而 BFC 与 IFC 简单来说就是一个规则 。
-
BFC 用于块级元素, IFC 用于行内元素 。
-
所谓 BFC 就是 块级 格式化上下文, Block Formatting Context; 在常规流中竖着排列 。
-
IFC 就是 行内 格式化上下文, Inline Formatting Content; 在常规流中横着排列 。
-
除了常规流会影响布局外, 还有 浮动 和 绝对定位 。
2. BFC 规则:
-
如果给一个元素创建了一个 BFC, 就相当于创建了一个新的容器(一个独立的容器), 容器内和容器外中的元素不会相互影响 。 外边的 BFC 规则, 不会对容器里的 BFC 产生影响, 而容器里面的 BFC 也不会对容器外的 BFC 产生影响, 也就是相互隔绝, 互不影响 。
-
盒子的布局开始是从包含容器的顶部开始的 。
-
BFC 内部的盒子会在内部一个接着一个在垂直方向排列 。
-
盒子的垂直方向的距离由 margin 决定, 但是在同一个 BFC 中, 在两个相邻的块级元素中, 垂直 margin 会发生折叠 。
-
BFC 的区域不会与浮动(float)元素的 box 重叠, 可以用来清除浮动和布局 。
-
每个盒子的左边界都要紧靠包含容器的左边界 (这也就解释了为什么块级元素都是单独成一行的, 如果不单独成行, 第二个盒子的左边界怎么紧靠包含容器的左边界)
-
计算 BFC 高度的时候, 浮动元素也会参与计算 。
3. 如何产生新的 BFC:
-
float 的值不为 none。
-
overflow 的值不为 visible; 可使用 overflow: hidden 或者 overflow: auto 。
-
display 的值为 table-cell, table-caption, inline-block 中的任何一个; 也可使用 flex、table、grid 。
-
position 的值不为 relative 和 static 。
-
根元素或者其他包含它的元素
-
当一个元素设置了新的 BFC 后, 就和这个元素外部的 BFC 没有关系了, 这个元素只会去约束自己内部的子元素 。
4. 实际应用:
-
清除浮动
-
margin 折叠问题
5. IFC 规则:
-
盒子是水平一个接一个的排列, 水平的 margin, 内边距, 边框是可以有的 。
-
垂直方向的对齐, 可能是底部对齐, 顶部对齐, 也可能是基线对齐 。
-
行框中的内联盒子的高度小于行框的高度时, 内联盒子的垂直方向的对齐方式取决于 vertical-align 属性
-
当一个行框水平不能容纳内联盒子时, 他们将会在垂直方向上产生多个行框, 他们上下一个挨着一个, 但是不会重叠
-
一般来说, 行框的左边界紧挨着包含容器的左边界, 行框的右边界紧挨着包含容器的右边界, (是两个边都紧挨着)。然而, 浮动盒子可能存在于包含边框边界和行框边界之间 。
6. 图例:
1-1-1-1.png
6. 代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>BFC</title>
</head>
<style>
html * {
padding: 0;
margin: 0;
}
/* 父子元素的边距重叠 */
#sec1 {
background-color: slategray;
/* 在我们没有添加 overflow: hidden 之前父元素的高度是 100 ， 在我们添加了 overflow: hidde之后 ， 父元素的高度是 110 ， 这个是为什么呢？ */
/* 添加了 overflow: hidden 相当于给父元素添加了 BFC ： 块级格式化上下文 */
/* overflow: hidden; */
}
.child1 {
height: 300px;
width: 80%;
background-color: brown;
margin-top: 30px;
}
/* 兄弟元素的边距重叠 */
/* 它重叠的原则就是取最大值 */
/* 它们上下的边距会合并 ， 合并为较大的哪一个 */
#sec2 {
background-color: yellowgreen;
}
#sec2 p {
height: 100px;
background-color: #555;
margin-top: 20px;
margin-bottom: 20px;
}
.children1 {
overflow: auto;
}
</style>
<body>
<!-- 父子元素的边距重叠 -->
<section id="sec1">
<article class="child1">
父子元素的边距重叠
<p>/* 在我们没有添加 overflow: hidden 之前父元素的高度是 100 ， 在我们添加了 overflow: hidde之后 ， 父元素的高度是 110 ， 这个是为什么呢？ */</p>
<p>/* 添加了 overflow: hidden 相当于给父元素添加了 BFC ： 块级格式化上下文 */</p>
<p>/* overflow: hidden; */</p>
</article>
</section>
<!-- 兄弟元素的边距重叠 -->
<!-- 怎么解决这个边距重叠的问题: 我们在子元素的外层添加一个父元素, 并且设置它的 BFC -->
<section id="sec2">
<p>
/* 兄弟元素的边距重叠 */<br>
/* 它重叠的原则就是取最大值 */<br>
/* 它们上下的边距会合并 ， 合并为较大的哪一个 */<br>
</p>
<div class="children1">
<p>兄弟元素的边距重叠22222</p>
</div>
<p>兄弟元素的边距重叠33333</p>
<p>兄弟元素的边距重叠33333</p>
<p>兄弟元素的边距重叠33333</p>
</section>
</body>
</html>
