什么是BFC?
要理解BFC, 我们需要先知道FC. FC(Formatting Context) 即: 格式化上下文. 这是W3C CSS2.1中规范的一个概念. 它是页面中的一块渲染区域, 并且有一套渲染规则. 它决定其子元素如何定位, 以及和其他元素的关系和相互作用.
所以BFC(Block Formatting Context)块级格式化上下文. 在CSS的三大定位(普通流, 浮动, 绝对定位)方案中是属于普通流的. 通俗来理解BFC就是一个与外界隔离的大盒子, 里面的元素不管怎样翻江倒海, 都对外部不会有影响.
常见触发BFC的方法: 只要符合下面任一条件都可触发
- 根元素. 即
html标签;- 浮动元素.
float的值不为none时;- 绝对定位元素.
position的值为absolute或fixed时;overflow的值不为visible时;display的值为inline-block,table-cell,flex,inline-flex,grid,inline-grid等时.
BFC的特性和应用
1. 在同一个BFC内两元素间的外边距会折叠;
避免这种情况发生的思路就是把元素放在一个弹性盒子(触发了BFC)里面, 或者把里面的元素都放在不同的BFC容器中, 可以使用
overflow: hidden来触发.
2. BFC会计算浮动元素的高度, 即可以包含浮动的元素;
其实我们以前清除浮动时, 用
overflow: hidden这个样式就是利用的BFC规则.
3. BFC可以阻止被浮动元素覆盖;
为避免被浮动元素盖住, 触发那个元素的BFC特性即可.
