关于css中的BFC现象

BFC

---

前言

本文主要说明了BFC的现象产生的方式以及BFC的用途

---

一、BFC是什么？

BFC是一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

———以上的内容摘至MDN

其实我个人不太愿意去解释BFC，因为我觉得这是一种现象而不是一个定义，并且官方定义是非常绕脑的，所以我更愿意用实例去解释BFC。

二、形成BFC的条件

---

• 具有overflow且值不是 visible 的元素，
• float不为noned的元素
• position的值为fixed或者absolute的元素
• display的值为inline-block、table-cell、table-caption以及flex的元素
• display: flow-root

三、BFC能解决的问题

---

• 解决margin的穿透问题
• 消除浮动带来的高度坍塌现象
• 划清兄弟元素之间的界限

总结

总的来说BFC是解决某些问题的一种现象，如果被问到什么是BFC我个人更愿意说出BFC的用途而不是BFC的定义。