BFC
BFC定义
BFC是指块级格式化上下文,它是一个独立渲染的区域,在这个区域内,所有的元素不受区域外元素的影响。
BFC的常见触发条件
BFC常见的触发条件大致有5种,分别为:
- 根元素
- 浮动元素:float:left/right
- 定位元素:position:absolute/fixed
- 网格、表格、弹性、行内块元素:display:grid/table/flex/inline-block/
- overflow:hidden/auto/scroll
BFC的特性
BFC的特性大致有4种,分别为:
- 同一个BFC内垂直方向的元素边距会发生重叠
- BFC不会与float浮动元素发生重叠
- 计算BFC高度时,浮动元素也要计算
- 这块BFC元素与非BFC元素不会产生影响
BFC的应用
- 清浮动
.div1{
width: 100px;
border: 1px solid #000000;
/* 无高度的父级元素撑不开浮动的子级元素,添加overfl触发BFC */
overflow: hidden;
}
.div2{
float: left;
width: 50px;
height: 50px;
background-color: #DDA0DD;
}
<div class="div1">
<div class="div2"></div>
</div>
.div1{
width: 100px;
height: 100px;
background-color: darkgray;
float: left;
}
.div2{
//阻止后面的元素被浮动元素覆盖
overflow: hidden;
width: 200px;
height: 200px;
background-color: #DDA0DD;
}
<div class="div1">111111111</div>
<div class="div2">222</div>
- 两栏自适应布局
.left{
width: 100px;
height: 200px;
background-color: darkgray;
float: left;
}
.right{
overflow: hidden;
height: 300px;
background-color: #DDA0DD;
}
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
- 阻止上下垂直元素边距重叠
本来上面div的margin-bottom和下面div的margin-top都为100px,呈现200px的外边距,但是块的上外边距和下外边距会合并为单个边距,取最大值,如果margin相等,则仅为一个,这就是外边距重叠。
.cube{
width: 100px;
height: 100px;
background-color: cyan;
margin: 100px;
}
.container{
/*BFC触发*/
overflow: hidden;
}
<div class="container">
<div class="cube"></div>
</div>
<div class="cube"></div>
问题:BFC的原理和应用,触发条件?BFC的具体的几种特性?
知识点:BFC