关于BFC的理解

BFC的理解

块级格式化上下文 Block Formatting Context

W3C 规定

通俗的话讲就是 被触发BFC 包裹住的元素，不会影响到其他元素

触发bfc 形成一个独立的空间 让空间内的元素不会受到其他的元素的影响

常用触发 BFC 的条件 有

• 1. float 不为none
• 2. position 不为relative 和 static
• 3. overflow 为 auto srcoll 和hidden
• 4. display 的值为table-cell 或 inline-block

常用来解决的问题

1.解决父元素的高度塌陷问题

• 情景一
  父元素里面有多个子元素 ，子元素浮动浮动 会导致父元素的高度塌陷

解决方法
1 给父元素设置高度
2 给父元素设置浮动
3 父元素 设置 overhiden
3 给父元素设添加一个元素 设置 claer：both（不建议）
4 给父元素添加一个伪类

两栏布局的自适应

外边距的垂直问题

 margin 重叠问题

---

2019.11.22