一、BFC是什么
BFC(Block formatting context)直译为"块级格式化上下文"。
BFC是一个独立的布局环境,其中的元素布局是不受外界的影响。并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。
二、BFC的作用与应用场景
-
去除边距重叠现象
-
清除浮动(让父元素的高度包含子浮动元素)
-
避免某元素被浮动元素覆盖
-
避免多列布局由于宽度计算四舍五入而自动换行
三、触发BFC的方式
- 根元素,即HTML元素
- float的值不为none
- position为absolute或fixed
- display的值为inline-block、table-cell、table-caption
- overflow的值不为visible
四、BFC实操简单应用
4.1 防止因为子元素浮动 导致父元素高度塌陷(也是清除浮动的一种方式)
此例 子元素inner浮动导致父元素高度塌陷
<style>
.container {
border: 10px solid red;
}
.inner {
background: #08BDEB;
height: 100px;
width: 100px;
float: left;
}
</style>
<body>
<div class="container">
<div class="inner"></div>
</div>
</body>
解决办法: 应用overflow: hidden; 给父元素开启BFC问题得到解决
<style>
.container {
border: 10px solid red;
overflow: hidden;
}
.inner {
background: #08BDEB;
height: 100px;
width: 100px;
float: left;
}
</style>
<body>
<div class="container">
<div class="inner"></div>
</div>
</body>
4.2避免外边距(margin)折叠
应用2:
此例相邻的块元素发生了 “外边距合并” 导致外边距重叠,相邻两个margin只显示一个
<style>
.container {
background-color: green;
overflow: hidden;
}
.inner {
background-color: lightblue;
margin: 10px 0;
}
</style>
<body>
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
解决办法,为中间的块元素开启BFC
<style>
.container {
background-color: green;
overflow: hidden;
}
.inner {
background-color: lightblue;
margin: 10px 0;
}
.bfc {
background-color: rgb(13, 33, 169);
margin: 10px 0;
overflow: hidden;
}
</style>
<body>
<div class="container">
<div class="inner">1</div>
<div class="bfc">
<div class="inner">2</div>
</div>
<div class="inner">3</div>
</div>
</body>