面试题:你知道什么是BFC吗?
一、什么是BFC?
BFC(Block Formatting Context)是块级格式化上下文的意思。它规定了元素如何对其它内容进行定位,以及与其它元素的关系及相互作用。
二、BFC的原理是什么?
- 属于同一个BFC的相邻两个盒子垂直方向会发生边距重叠
- BFC区域不会和浮动元素区域发生重叠
- BFC是页面上一个独立的容器,容器里的子元素不会影响到外面的元素,外面的元素也不会影响里面的子元素
- 计算BFC的高度时,浮动子元素也参与计算。
三、如何形成BFC?
- float取值不为none
- position取值为absolute或fixed
- overflow取值不为visible(auto或者hidden)
- display取值为table-cell,table-caption,flex,inline-flex,inline-block
四、BFC在实际开发中有哪些应用?
1、利用BFC区域不和浮动元素发生重叠进行自适应布局
<section id="layout">
<style media="screen">
#layout .left{
width: 100px;
height: 100px;
float: left;
background-color: pink;
}
#layout .right{
height: 110px;
overflow: auto;
background-color: antiquewhite;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
2、利用浮动元素也参与计算BFC高度清除浮动、消除高度塌陷的问题
<section id="float">
<style media="screen">
#float .father{
background-color: blue;
overflow: hidden;
}
#float .child{
float: left;
background-color: pink;
width: 300px;
height: 50px;
}
</style>
<div class="father">
<div class="child">我是浮动元素</div>
</div>
</section>
3、解决垂直方向边距重叠的问题
<section id="margin">
<style media="screen">
#margin p{
margin: 20px auto 30px;
background-color: pink;
}
#margin .create-bfc{
overflow: auto;
}
</style>
<p>我是第一个p元素</p>
<div class="create-bfc">
<p>我是第二个p元素</p>
</div>
</section>
补充:根据盒模型解释下边距重叠?
问题描述:两个box如果都设置了边距,那么在垂直方向上,两个box的边距会发生重叠,以绝对值最大的那个为最终结果显示在页面上。
边距重叠分为以下3种:
1、父子元素边距重叠
- 如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距。
- 给父元素添加overflow:hidden,这时父元素就形成BFC,不会随子元素产生外边距,但是父元素的高度会发生变化。
2、兄弟元素边距重叠
- 兄弟平级元素在垂直方向上会出现外边距重叠的情况,最后外边距的大小取绝对值大的那个
3、空元素自身上下边距重叠
- 空元素自身的margin-top和margin-bottom也会重叠,最后外边距取绝对值大的那个。
补充:浮动会造成什么问题?如何清除浮动?
问题描述:父元素未设置高度,子元素浮动后脱离文档流,导致父元素高度塌陷
清除浮动的几种方法
1、让父元素也浮动。
缺点:页面整体浮动,影响布局,不推荐
2、给父元素设置overflow:hidden,触发BFC。
缺点:内容增多的时候溢出部分被隐藏,不推荐
3、在最后一个浮动标签之后添加一个空元素,设置clear:both。
缺点:页面添加无效标签,语义化差,不推荐
4、伪元素。.clearfix::after{content:"";display:block;clear:both}