历史小剧场
朱元璋之所以选择胡惟庸,并不是因为他很强,相反,正式因为胡惟庸对朱元璋的威胁小,所以朱元璋才让他成为了胜利者。而愚蠢的胡惟庸并不了解这一点。—《明朝那些事儿》
BFC概念
“BFC容器"通常是指"块级格式化上下文容器”(Block Formatting Context Container)。块级格式化上下文(BFC)是在CSS中用来管理和控制元素在页面上布局和排列的一种机制。BFC容器是一种具有特定规则的HTML元素或CSS属性,它们会创建一个独立的上下文,影响其内部元素的布局和排列方式。BFC容器是CSS布局中的一个重要概念,可以帮助开发人员更精确地控制元素的布局和排列。
理解:我们可以将BFC当作是元素的属性,当元素拥有了这个属性,这个元素就可以看作是一个隔离的独立容器
如何触发BFC?
- 根元素 </html
- 浮动元素:float
- 绝对定位元素:position为absolute或fixed
- display为 : inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex或inline-flex、grid或inline-grid;
- overflow值不为visible的块元素;
- contain值为layout、content或paint的元素;
- 多列容器(元素的column-count或column-width不为auto,包括column-count为1)
三大作用
- 避免外边距重叠
比如:有以下代码:
<style>
.cube {
width: 100px;
height: 100px;
background-color: deepskyblue;
margin: 100px;
}
</style>
<div class="cube"></div>
<div class="cube"></div>
运行之后,我们可以看到效果,两个div之间间隔只有100px(正常情况下应该是200px)
修改代码,将各自的div外层包裹一个div,然后再给外层的div加上BFC容器
<style>
.cube {
width: 100px;
height: 100px;
background-color: deepskyblue;
margin: 100px;
}
.container {
overflow: hidden;
}
</style>
<div class="container">
<div class="cube"></div>
</div>
<div class="container">
<div class="cube"></div>
</div>
然后再运行,间距则变成了200px
- 清除浮动
首先,我们运行一下案例
<style>
.container {
border: 1px solid red;
/* 触发BFC 清除浮动 */
/* overflow: hidden; */
}
.container .cube {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
</style>
<div class="container">
<div class="cube"></div>
</div>
可以看到以下效果:父子关系的情况下,父元素无视浮动元素会产生高度塌陷
修改代码,给外层容器div触发BFC
<style>
.container {
border: 1px solid red;
/* 触发BFC 清除浮动 */
overflow: hidden;
}
.container .cube {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
</style>
<div class="container">
<div class="cube"></div>
</div>
运行看效果:
- 阻止元素被浮动元素覆盖
首先,运行以下案例:
<style>
.float {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.normal {
width: 200px;
height: 200px;
background-color: blue;
/* 触发BFC */
/* overflow: hidden; */
}
</style>
<div class="float"></div>
<div class="normal"></div>
我们可以看到两个容器有相交,且浮动元素覆盖了普通元素。
接着,我们修改代码,给普通元素加上overflow:hidden;
.normal {
width: 200px;
height: 200px;
background-color: blue;
/* 触发BFC */
overflow: hidden;
}
再次运行,我们就可以看到两个div互补干扰了