什么是BFC??
BFC(块级格式化上下文Block Formatting Contexts)属于CSS中的三种布局模型中的流动模型。
创建BFC的元素就是一个独立的盒子,该盒子里的布局不受外部影响,同时也不影响外界元素。
触发BFC的条件
- float 值不为none的其他值
- overflow 值不为visible的其他值
- display为inline-block、table-cell、flex、inline-flex、table-caption
- position 值为absolute、flex
- fieldset元素
BFC的作用
1、阻止外边距margin重叠:给相邻的子元素中的其中一个添加父元素,使父元素触发BFC
2、包含浮动元素(解决父元素高度塌陷):使父元素触发BFC
3、没有BFC的兄弟元素中的内容不会被浮动元素覆盖