一、什么是BFC
- 是 Block Formatting Contexts 的缩写，名为“块级格式化上下文”。
- 是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。
二、BFC的特点
- 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何变化，都不会影响到外部。
三、怎样触发BFC
-
overflow: hidden
-
position: absolute
-
position: fixed
-
display: inline-block
-
display: table-cell
-
display: flex
四、BFC布局规则
-
BFC 就是一个块级元素，块级元素会在垂直方向一个接一个的排列
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。同样外面的也不会影响里面的。
-
垂直方向的距离由margin决定， 属于同一个
BFC的两个相邻的标签外边距会发生重叠 -
计算BFC的高度时，浮动元素也参与计算
五、BFC解决了什么问题
-
问题：在子元素设置成浮动元素的时候，会产生父元素高度塌陷的问题。
-
解决方法：给父元素设置overflow:hidden；的时候会产生BFC由于在计算BFC高度时，自然也会检测浮动的子盒子高度。所以当子盒子有高度但是浮动的时候，通过激发父盒子的BFC功能，会产生清除浮动的效果。
-
问题：属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。
-
解决方法：根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质，可以给其中一个盒子再包裹一个盒子父元素，并触发其BFC功能（例如添加overflow:hidden;）这样垂直方向的两个盒子就不在同一个BFC中了，因此也不会发生垂直外边距合并的问题了。
六、结语
非常感谢您能读完这篇文章，也欢迎评论补充哦，如果您感觉这篇文章对您有帮助的话，希望您能点个推荐和收藏哦，非常感谢！
标签：BFC,容器,搞定,盒子,一篇,元素,垂直,浮动 来源： https://www.cnblogs.com/songyajie32C/p/16544013.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。