引言:
在CSS里面.元素的关系无非这几种: 父子. 兄弟. 子孙关系.
每个元素都是一个独立个体. 或 几个元素在一起组成一个团体.以跟别的个体或团体区别开来.
在页面排版布局中.各种关系交错复杂: 有的重叠.有的脱离上级管束....等等.
于是设计CSS的团队 就有个想法: 在我的BGM里..没人能战胜我.
在这情况之下: CSS规范 给出了 BFC 这样一个机制--> 管住所有在BFC里面的元素不让出去.
定义:
BFC( Block Formatting Context ) 翻译过来叫: 块级格式化上下文.
它的定义在官方文档中 或 MDN 都有阐述(看! 不如不看.) .
但是, 长篇累牍的定义 加上 各种术语 让你无法理解它到底是个什么东西?
所以在前端的世界里.没人能解释清楚或精准定义BFC 是个什么东西..
这里我用一张图简单总结了一下:
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;
}
效果:
这是就是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;
}
效果:
注意: 以上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;
}
效果
- (二): 在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;
}
效果
-
功能二 举例:
相邻两元素划清界限
设计场景: 相邻左为浮动元素, 右为普通元素. 都设置边框
.left {
width: 100px;
min-height: 300px;
border: 3px solid rgba(255,0,0,.5);
float: left;
}
.right {
min-height: 300px;
border: 3px solid green;
}
效果
如果给 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;
}
效果
拓展:
BFC的实际用处:
我们看一个例子:
.father {
background: red;
}
.son {
height: 200px;
background: green;
margin-top: 50px;
}
效果:
这个时候就要用到BFC, 只要在 父元素里 建立BFC.
.father {
background: red;
overflow: auto; /* 建立BFC */
}
.son {
height: 200px;
background: green;
margin-top: 50px;
}
效果
其实, 这里也可以不用到BFC , 只要给 父元素设置 border-top 也可以达到相同效果.
