BFC是什么
- BFC全名Block Formatting Contexts:直译过来就是块级作用域执行上下文
- 简单来说,就是页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响到外面的元素
规则
BFC
就是一个块级元素,块级元素会在垂直方向一个接一个的排列
BFC
就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签
- 垂直方向的距离由margin决定, 属于同一个
BFC
的两个相邻的标签外边距会发生重叠
- 计算
BFC
的高度时,浮动元素也参与计算
如何产成 BFC
- 根元素body
- 脱离标准文档流动:设置
float
:left/right
或position
为absolute/flxed
overflow
不为visible
display
为inline-block/flex
BFC的作用
- 1.解决margin塌陷(给塌陷元素各加上一个触发BFC的父元素)
css:
.block1,.block2{
width: 100px;
height: 100px;
border: 1px solid;
margin: 20px;
}
html:
<div class="swrap" style="overflow:hidden">
<div class="block1"></div>
</div>
<div class="swrap" style="overflow:hidden">
<div class="block2"></div>
</div>
css:
.float{
overflow: hidden;
}
.left{
width: 100px;
height: 100px;
border: 1px solid;
float: left;
}
.right{
width: 100px;
height: 100px;
border: 1px solid;
float: right;
}
html:
<div class="float">
<div class="left"></div>
<div class="right"></div>
</div>
css:
.left {
width: 100px;
height: 100px;
border: 1px solid;
float: left;
}
.content {
border: 1px solid;
overflow: hidden;
}
html:
<div class="left"></div>
<div class="content">BFC 全称:Block Formatting Context, 名为 "块级格式化上下文"。
W3C官方解释为:BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context提供了一个环境,HTML在这个环境中按照一定的规则进行布局。
简单来说就是,BFC是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢,BFC可以看做是一个CSS元素属性
</div>