在前端的布局手段中，一直有这么一个知识点，很多前端开发者都知道有它的存在，但是很多人也仅仅是知道它的存在而已，对它的作用也只是将将说得出来，可是却没办法说得非常的清晰。这个知识点，就是BFC。想要了解BFC的规则，前提必须是熟悉前端网页的多种布局手段，例如盒的显示模式display，三种布局手段标准流（normal）、浮动流（float）、定位流（position）等。你只有熟练掌握了这些布局手段之后，才能很好的理解BFC。今天小宇宙网络来为大家解析一下BFC，希望对各位新老朋友有所帮助。
一、定义
BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的。
“A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.”
强行翻译一下吧，简单来说，这句话的意思就是：“一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素”
很显然，哪怕强行翻译了，大部分人依旧是看不懂这句话的。看都看不懂，那自然就没什么能把它说明白。talk is cheap, show me the code.看不懂意思，我用代码来给你演示。
网站建设
品牌设计
APP开发
小程序开发
商城开发
网站优化
UI设计
增值服务
