BFC

Block Formatting Context (BFC)，内部自成布局，隔绝与外部

形成方式

• 1.float
• 2.position: absolute\fixed
• 3.html本身
• 4.display: inline-block
• 5.display: table-cell
• 6.display: table-caption,
• 7.display: table, table-row, table-row-group, table-header-group, table-footer-group or inline-table
• 8.block with overflow not visible and clip
• 9.display: flow-root.
• 10.contain: layout, content, or paint.
• 11.grid item or flex item

带来的好处

清除float

    - 1.overflow:auto
    - 2.display: flow-root
    - 3.更好的方式，避免用float 改用grid,flex等

margin 合并

- overflow: hidden 
- 尽可能新特性flew,grid，避免历史版本问题

参考

BFC