BFC
程序员文章站
2022-03-25 14:58:07
...
BFC(Block formatting context)
直译为"块级格式化上下文"。
BFC它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
产生BFC的条件
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible。
BFC布局规则特性：
1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
4.BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
5.计算BFC的高度时，自然也会检测浮动的盒子高度。
BFC的主要用途
1.清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。
主要用到 ：计算BFC的高度时，自然也会检测浮动的盒子高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
width: 400px;
border: 10px solid #ccc;
overflow: auto; //触发BFC
}
.son1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.son2{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
</html>
2.解决外边距合并问题 **
外边距合并的问题。
主要用到 ：盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
width: 400px;
border: 10px solid #ccc;
}
.box{
overflow: auto; //触发BFC
}
.son1{
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 100px;
}
.son2{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="box"> //son1,son2不在同一个BFC里
<div class="son1"></div>
</div>
<div class="son2"></div>
</div>
</body>
</html>
3.制作右侧自适应的盒子问题 (*了解)
主要用到 : BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
width: 400px;
height: 400px;
border: 10px solid #ccc;
}
.son1{
width: 100px;
height: 100px;
background-color: red;
float: left; //浮动的盒子
}
.son2{
background-color: yellow;
overflow: auto; //触发BFC
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2">本例演示当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作。
如何隐藏溢出元素中溢出的内容
本例演示在元素中的内容太大以至于无法适应指定的区域时，如何设置 overflow 属性来隐藏其内容。
如何设置浏览器来自动地处理溢出
本例演示如何设置浏览器来自动地处理溢出。</div>
</div>
</body>
</html>