1.BFC概念
BFC,即,Block Formatting Contents(块级格式化上下文),它是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
具有BFC特性的元素可以看做是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且BFC具有普通容器所没有的特性。
通俗一点来讲,可以把BFC理解为一个封闭的大箱子,箱子内部的元素无路如何翻江倒海,都不会影响到外部。
2.BFC触发条件
满足以下条件之一:即可触发BFC:
-
- float的值不是none
- position的值不是static或者relative
- display的值为inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
下面的box盒子就是一个BFC独立容器
.box{ width: 100px; height: 100px; overflow: hidden;/* 触发了BFC,形成了独立盒子 */ }
3.BFC的应用
在前面介绍盒模型的margin时,出现了传递和叠加的问题,这里可以采用BFC规范来解决,原理就是让盒子形成一个独立的容器,无论里面的元素如何折腾,都影响不到外面的元素。
<style> .box1{ width: 200px; height: 200px; background: pink; overflow: hidden; /* 触发了BFC,形成独立盒子 */ } .box2{ width: 100px; height: 100px; background: skyblue; margin-top: 30px; } </style> <div class="box1"> <div class="box2"></div> </div>