BFC是什么
格式化上下文 ,他是文档中的一块渲染区域,他有一套自己的渲染规则,他决定了子元素如何定位,以及和其他元素的关系和相互作用
如何触发BFC
1.根元素(<html>)
2.浮动定位(元素的float不是none)
3.绝对定位(元素的position为absolute或者fixed)
4.行内块元素(元素的display为inline-block)
5.表格单元格(元素的display为table-cell,HTML表单单元格默认为该值)
6.overflow不等于visible
7了解更多参考https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
BFC的特性
1.同一个BFC,上下外边距会重合(也就是外边距塌陷)
2.清除浮动(BFC可以包含浮动元素)
3.BFC区域不会和float元素重叠