BFC的相关知识

BFC（Block Formatting Contexts）

基本概念：块级，格式化，上下文

原理：

1. BFC这个元素的垂直方向的边距会发生重叠
2. BFC的区域不会与浮动元素的float重叠
3. 独立的容器，内外元素互不影响
4. 计算BFC高度，浮动元素也参与计算

那么如何创建BFC呢？

• float不为none的时候
• position不为static或者relative的时候
• display为与table相关值的时候
• overflow为auto，hidden的时候

使用的场景（创建BFC=>验证BFC的区域不会与浮动元素的float重叠）：

那么如何解决BFC这个元素的垂直方向的边距会发生重叠这个问题呢

就是给子元素加个父元素，同时父元素创建一个BFC,即可解决