BFC(Block formatting context)
直译为”块级格式化上下文”。
元素的显示模式
我们前面讲过 元素的显示模式 display。
分为 块级元素 行内元素 行内块元素 ,其实,它还有很多其他显示模式。
那些元素会具有BFC的条件
不是所有的元素模式都能产生BFC,w3c 规范:
display 属性为 block, list-item, table 的元素,会产生BFC.
大家有么有发现这个三个都是用来布局最为合理的元素,因为他们就是用来可视化布局。
注意其他的,display属性,比如 line 等等,他们创建的是 IFC ,我们暂且不研究。
这个BFC 有着具体的布局特性:
有宽度和高度 , 有 外边距margin 有内边距padding 有边框 border。
就好比,你有了练习武术的体格了。 有潜力,有资质。
什么情况下可以让元素产生BFC
以上盒子具有BFC条件了,就是说有资质了,但是怎样触发才会产生BFC,从而创造这个封闭的环境呢?
同样,要给这些元素添加如下属性就可以触发BFC。
-float属性不为none
-position为absolute或fixed
-display为inline-block, table-cell, table-caption, flex, inline-flex
-overflow不为visible。
BFC元素所具有的特性
BFC布局规则特性:
1.在BFC中,盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。
4.BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。
5计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
白话文: 孩子在家里愿意怎么折腾都行,但是出了家门口,你就的乖乖的,不能影响外面的任何人。
BFC的主要用途
BFC能用来做什么?
(1) 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow: hidden样式,对于IE6加上zoom:1就可以了。
主要用到
计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC清除浮动</title>
<style>
.father {
width: 300px;
border: 1px solid red;
/*overflow: hidden; 触发BFC 清除浮动*/
/* float: left; */
position: absolute;
}
.son1,
.son2 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.son2 {
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">1</div>
<div class="son2">2</div>
</div>
</body>
</html>
清除浮动前
清除浮动后
(2) 解决外边距合并问题
外边距合并的问题。
主要用到
盒子垂直方向的距离由margin决定。
属于同一个BFC的两个相邻盒子的margin会发生重叠
属于同一个BFC的两个相邻盒子的margin会发生重叠,那么我们创建不属于同一个BFC,就不会发生margin重叠了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC解决内边距合并</title>
<style>
.father {
width: 300px;
height: 500px;
border: 1px solid red;
}
.son1,
.son2 {
width: 100px;
height: 100px;
background-color: green;
}
.over {
overflow: hidden;
}
.son1 {
margin-bottom: 50px;
}
.son2 {
background-color: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="over"> <!-- over隔开 那么son1和son2不是同一个BFC -->
<div class="son1">1</div>
</div>
<div class="son2">2</div>
</div>
</body>
</html>
不是同一个BFC
(3) 制作右侧自适应的盒子问题
主要用到
普通流体元素BFC后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC产生右侧自适应盒子</title>
<style>
.father {
width: 400px;
height: 500px;
border: 1px solid #000;
margin: 0 auto;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.txt {
height: 300px;
background-color: purple;
overflow: hidden; /* 给txt 创建BFC 区域不在和浮动产生交集 紧贴浮动边缘*/
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
<div class="txt">作为目前可实现的、速度最快的地面交通工具,高速磁浮用于长途运输,可在大型枢纽城市之间或城市群与城市群之间形成高速“走廊”。据高速磁浮课题负责人、中车青岛四方机车车辆股份有限公司副总工程师丁叁叁介绍,按实际旅行时间计算,在1500公里运程范围内,高速磁浮是最快的交通方式。“以北京至上海为例,加上旅途准备时间,乘飞机需要约4.5小时,高铁需要约5.5小时,而高速磁浮仅需3.5小时左右。”</div>
</div>
</body>
</html>
第一个盒子浮动 第二个盒子不创建BFC 环绕效果
第二个盒子创建BFC区域 (第一个盒子width变大 第二个盒子宽度自适应)
BFC 总结
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动,和外边距合并等等,因此,有了这个特性,我们布局的时候就不会出现意外情况了。