CSS BFC 了解一下

引言:

在CSS里面.元素的关系无非这几种: 父子. 兄弟. 子孙关系.
每个元素都是一个独立个体. 或几个元素在一起组成一个团体.以跟别的个体或团体区别开来.
在页面排版布局中.各种关系交错复杂: 有的重叠.有的脱离上级管束....等等.
于是设计CSS的团队就有个想法: 在我的BGM里..没人能战胜我.
在这情况之下: CSS规范给出了 BFC 这样一个机制--> 管住所有在BFC里面的元素不让出去.

定义:

BFC( Block Formatting Context ) 翻译过来叫: 块级格式化上下文.
它的定义在官方文档中或 MDN 都有阐述(看! 不如不看.) .
但是, 长篇累牍的定义加上各种术语让你无法理解它到底是个什么东西?
所以在前端的世界里.没人能解释清楚或精准定义BFC 是个什么东西..

这里我用一张图简单总结了一下:

snipaste_20200302_145237.png

BFC创建的条件

根元素或其他包含它的元素
浮动元素(元素的float不为none)
绝对定位元素(元素具有position为 absolute 或 fixed )
内联块 (元素具有 display: inline-block)
表单单元格和表格标题 (元素具有display: table-cell , display: table-caption)
具有overflow 且值不是 visible 的块元素.
display: flow-root ( 就是为了建立BFC 而设定的属性.功能单一.无副作用.但支持性不是很好)

BFC功能

一: 父管子元素

二: 与兄弟(相邻)划清界限

功能一举例:

实例
设计场景: 一个父元素 div元素里面包裹一个子元素div , 给子元素div设置 float:left

不创建BFC情况

.father {
  border: 3px solid red;
  min-height: 30px;  
}
.son {
  width: 500px;
  height: 100px;
  background: green;
  float: left;
}

效果:

11.png

这是就是BFC上场的时候了.
通过前面创立BFC条件.
我们知道,给父元素设置: float: left 或 display: inline-block / table-cell / table-caption 或
position: absolute / fixed 或者 overflow: auto / hidden / scroll(最常用) 都可以让浮动的子元素被父元素包裹起来.

.father {
  
  border: 3px solid red;
  min-height: 30px;
  
  /* 下面9条设置都可以创建BFC,让父元素包裹浮动的子元素 */
  float: left;
  display: inline-block;
  display: table-cell;
  display: table-caption;
  position: absolute;
  position: fixed;
  overflow: auto;
  overflow: scroll;
  overflow: hidden;  
}
.son {
  width: 500px;
  height: 100px;
  background: green;
  float: left;
}

效果:

22.png

注意: 以上9条设置, 除了创建了BFC,还会产生其他副作用..
比如: float, position就改变了父元素的定位. display 改变了原来的盒子属性...
总之.. 多多少少有一些后遗症留下来. 不纯粹.不干净

那问题来了: 怎么让一个元素只创建BFC 而不改变任何其他属性呢?
答案是: display: flow-root

上面说的功能纯粹, 是它的绝对优点.
而它的缺点是: 不兼容低版本浏览器.

在实现第一个功能的同时: 会出现两个问题:

(一): 在一个BFC里面两个块级元素之间在竖直margin会合并
实例:

.father {
  
  border: 5px solid red;
  min-height: 30px;
  
  display: flow-root;
}
.father div {
   width: 500px;
  height: 100px;
  background: green;

  margin: 10px;
}

效果

33.png

(二): 在BFC里. 对于孙子或孙子以下辈的元素就失去了管束能力.

.father {
  border: 5px solid red;
  min-height: 30px;
  display: flow-root;
}
 .son {
   width: 500px;
  height: 100px;
  background: green;
  float: left;
}
.sunzi {
  width: 500px;
  height: 100px;
  background: orange;
  margin-top: 100px;
}

效果

44.png

功能二举例:

相邻两元素划清界限
设计场景: 相邻左为浮动元素, 右为普通元素. 都设置边框

.left {
  width: 100px;
  min-height: 300px;
  border: 3px solid rgba(255,0,0,.5);
  float: left;
  
}

.right {
  min-height: 300px;
  border: 3px solid green;
}

效果

55.png

如果给 right 创建一个BFC , 看看效果;

.left {
  width: 100px;
  min-height: 300px;
  border: 3px solid rgba(255,0,0,.5);
  float: left;
  
}

.right {
  min-height: 300px;
  border: 3px solid green;
  overflow: auto;
}

效果

66.png

拓展:
BFC的实际用处:
我们看一个例子:

.father {
  background: red;
}
.son {
  height: 200px;
  background: green; 
  margin-top: 50px;
}

效果:

77.png

这个时候就要用到BFC, 只要在父元素里建立BFC.

.father {
  background: red;
  overflow: auto; /* 建立BFC */
}
.son {
  height: 200px;
  background: green;
  margin-top: 50px;
}

效果

88.png

其实, 这里也可以不用到BFC , 只要给父元素设置 border-top 也可以达到相同效果.