【CSS】BFC

对BFC的理解（Block Formatting Context）：块级格式化上下文

是Web页面的可视CSS渲染的一部分，是块盒子布局过程发生的区域，也是浮动元素与其他元素交互的区域。

它是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

 

• 如何创建BFC：
• 方法一：float的值不是none
• 方法二：position的值不是static或者relative
• 方法三：display的值是Inline-block、flex或者Inline-flex
• 方法四：overflow:hidden

 

• BFC的其他作用：
• BFC可以取消盒子margin塌陷
• BFC可以阻止元素被浮动元素覆盖

---

例1：

一个盒子如果不设置height，当内容子元素都浮动时，无法撑起自身，那么这个盒子没有形成BFC。

 

使其行形成BFC的方法：

 

---

例2：

由于子盒子设置了margin-top，导致父盒子跟着下坠，这种现象称为margin塌陷

 

解决方法： 让父级盒子实现BFC

 

---

例3：

下面的div因为没有浮动，被遮盖住了

 

解决方法：

使用overflow使其形成BFC

 

以上仅作为个人学习笔记。