BFC
- BFC:块级格式化上下文,可以理解为是一个特殊的容器 规则:
- 1:是嵌套关系下用,子元素为块级元素才会遵循这些规则2:垂直排列
- 3:同属于同一个BFC中的子元素,垂直方向的外边距相遇会重合4:子元素的margin-left挨着父元素的border- 1eft
- 5: BFC不会与浮动元素重合
- 6: BFC是一个独立的容器,里面的子元素不会影响外面的元素7:计算BFC高度时,浮动子元素参与高度计算
- 触发方式:
- 1:根元素(html)2:浮动不为none
- 3: position为 absolute fixed
- 4:display为 inline-block table-cell table-caption flex inline-flex5: overflow不为visible
- BFC应用:
- 解决垂直外边距相遇会重合的问题两列布局
- 解决高度塌陷(父元素未设置高度,子元素进行了浮动)
