什么是BFC
BFC(Block formatting contexts) 块级格式化上下文,它是文档中的一块渲染区域,有自己的一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用
BFC的目的是形成一个相对于外界完全独立的控件,让其内部的子元素不会影响到外部的元素
如何触发BFC
- 根元素(<html>)
- 浮动元素(元素的 float 不是 none)
- 绝对定位的元素(元素的position为 absolute 或者fixed)
- 行内块元素(元素的display 为inline-block)
- 表格单元格(元素的display为 table-cell,HTML表格单元格默认为该值)
- overflow不等于visible 为auto scoll hidden
BFC的特性
- 同一个BFC的上下外边距会合并,与方向无关
- 内部的盒子会在垂直方向上一个接一个的放置
- 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此
- BFC的区域不会与float的元素区域重叠
- 清除浮动(BFC可以包含浮动的元素)
- BFC就是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
应用场景