1、什么是BFC?
BFC就是“块级格式化上下文”的意思,BFC是一块独立的布局环境,保护其中内部元素不收外部影响,也不影响外部。本身BFC是一种css的布局方式,只是我们可以利用它来解决外边距折叠的问题
2、BFC的布局规则?
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算。
3、如何触发BFC?
在box属性值为这些的情况下,都会让所属的box产生BFC。
overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
也可以用排除法:
overflow的值不是visible;
position的值不是static或relative
float的值不是none
display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
inline-flex
3、BFC有何作用?
- 利用BFC可避免外边距折叠
常规流布局时,盒子都是垂直排列,两者之间的间距由各自的外边距决定,但不是二者外边距之和。
- 常规流布局折叠规则:
1)两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
2)两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
3)两个外边距一正一负时,折叠结果是两者的相加的和。
4)当两个相邻元素在不同的BFC中,就能避免外边距被折叠。
4、BFC的应用?
- 可以用来自适应布局
利用BFC的这一个原理就可以实现两栏布局,左边定宽,右边自适应。不会相互影响,哪怕高度不相等。
给right加overflow:hidden;使其变成BFC,消除外部left因浮动对他的影响
代码:
<!-- BFC不与float重叠 -->
<section id="layout">
<style media="screen">
#layout{
background: red;
height: 200px;
}
#layout .left{
float: left;
width: 100px;
height: 80px;
background: blue;
}
#layout .right{
height: 100px;
background:green;
overflow: hidden;
}
</style>
<div class="left">left</div>
<div class="right">right</div>
</section>
- 可以清除浮动:
父元素加overflow:hidden/auto,变BFC
代码:
<!-- BFC子元素即使是float也会参与计算 -->
<style>
#out{
background: red;
border: 1px solid black;
overflow: hidden;
}
#inner{
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<div id="out">
<div id="inner">我是浮动元素</div>
</div>