CSS中的BFC及其作用
2019-10-20 本文已影响0人
手指乐
-
BFC是什么
BFC 全称为 块格式化上下文 (Block Formatting Context) ，BFC是一个块独立的作用域，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素
将元素设置为不同BFC可以让它们之间保持独立，以消除它们之间的影响 -
触发BFC的条件
满足下列条件之一就可以触发BFC
1：根元素，即html元素
2：float的值不为none
3：overflow的值不为visible
4：display的值为inline-block、table-cell、table-caption
5：position的值为absolute或者fixed -
BFC的作用
可以阻止元素被浮动的元素覆盖（可做两栏布局自适应）
绿色盒子浮动遮挡了红色盒子
触发红色盒子的BFC，可防止被绿色盒子遮挡
<style>
*{
padding:0;
margin :0;
}
.box {
width: 400px;
height: 100px;
margin: 0 auto;
}
.green {
width: 100px;
height: 50px;
float: left;
background-color: green;
}
.red {
width: 200px;
height: 100px;
/* float: left; */
/* display: inline-block; */
/* display: table-cell; */
/* overflow: hidden; */
/* position: absolute; */
/* position: fixed; */
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="green"></div>
<div class="red">BFC</div>
</div>
</body>
把注释的任意一条打开会触发.red的BFC，让两者处于不同的BFC
-
解决高度塌陷
绿盒子设置浮动前，父盒子被撑开高度：
绿盒子设置浮动后，父盒子高度塌陷：
盒子触发BFC可以解决这个问题
<style>
.box {
width: 200px;
border: 1px solid #ccc;
overflow：hidden；
}
.son {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
- 解决同一个BFC区域的垂直方向margin合并问题
属于同一个BFC的两个相邻的box的margin会重叠，以大的为主。要想解决这个问题，可以将两个盒子分为不同的BFC中。
在同一个BFC中时：
分为两个不同的BFC之后：
<style>
.green {
width: 200px;
height: 100px;
margin-bottom: 20px;
background-color: green;
}
.red {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: red;
}
.box {
overflow: hidden;
}
.main {
width: 300px;
height: 250px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="main">
<div class="green"></div>
<div class="box">
<div class="red">BFC</div>
</div>
</div>
</body>
