名为 “块级格式化上下文”。
本质就是一个封闭的盒子,是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。
特性:
1)内部元素在垂直方向上一个接一个放置
2)垂直方向上的外间距由margin值决定,属于同一个BFC区域的相邻的元素margin值会重叠
3)每个元素的左外间距与包含块的左边界相接触,浮动元素也是如此
4)BFC区域不会与浮动元素区域重叠
5)计算BFC高度时,浮动元素也会参与计算
6)BFC是页面上一个独立的渲染区域,容器中子元素不会影响到外面的元素,反之亦然
触发BFC使用的CSS属性
overflow: hidden|auto
float: left|right
display: inline-block|table-cell|flex
position: absolute|fixed
解决的问题
· 使用Float脱离文档流,高度塌陷(没撑开):可以给父元素加一行例如display: inline-block或其他都可以,触发BFC。
· Margin边距重叠(为两个盒子的margin外边距设置的是10px,结果显示两个盒子之间只有10px的距离):使用BFC规则(为元素包裹一个盒子形成一个完全独立的空间,做到里面元素不受外面布局影响,比如给其中一个盒子外面套一个
标签),或者简单粗暴方法一个设置margin,一个设置padding。
· 两栏布局(第二个元素可能会被第一个元素设置的float脱离文档流而被覆盖):设置第二个元素的css属性从而触发BFC。