1.bfc的定义(block formatting context)
直译为“块级格式化上下文”
目的:形成一个完全独立的空间,使空间内的元素不会受到外界元素的影响。
2.如何触发bfc
(1)float不为none
(2)position不是relative或static
(3)display的属性不能是inine-block、table-cell、flex、table-caption或inline-flex
(4)overflow不是visible
3.bfc的应用
1.解决父元素高度塌陷的问题
当一个父元素包含许多个子div,且多个元素设置了float时,父元素会识别不到子元素的存在,从而使得父元素没有高度,以致后面的元素显示收到影响,这时将父元素overflow设置为hidden时,父元素此时会根据子元素的高度自己自己产生相同的高度。
#one{
width:400px;
background-color: pink;
overflow: hidden;
}
.two{
width:100px;
height:100px;
float:left;
background-color: blue;
}
<div id="one">
<div class="two">2</div>
<div class="two">3</div>
<div class="two">4</div>
</div>
2.自适应两栏布局
#left{
width:100px;
height:100px;
text-align: center;
float: left;
background-color: pink;
}
#right{
width:500px;
height:500px;
text-align: center;
background-color: lightblue;
overflow: hidden;
//没有overflow的话,蓝色会识别不到粉色的存在,会与粉色重叠一部分
}
<div id="left">111</div>
<div id="right">222</div>
3.清除浮动
当不给父元素设置高度、子元素设置了浮动时,父元素会发生高度塌陷,这时需要清除浮动。
#big{
width:200px;
background-color: grey;
border: 30px green solid;
overflow: hidden;//如果没有就是第一张图的效果
}
#left{
width:100px;
height:100px;
text-align: center;
float: left;
background-color: pink;
}
#right{
width:100px;
height:100px;
text-align: center;
float: left;
background-color: lightblue;
}
<div id="big">
<div id="left">111</div>
<div id="right">222</div>
</div>