标签：BFC bfc 元素 重叠 float 规范 简述 table

BFC 全称“块级格式化上下文”(Block Formatting Context)，对应的还有 IFC。BFC 类似一个“结界”，如果一个 DOM 元素具有 BFC，那么它内部的子元素不会影响外面的元素；外面的元素也不会影响到其内部元素。

应用场景：

• 解决浮动子元素导致父元素，高度坍塌的问题
• 解决文字环绕在float 四周的情况
• 解决边距重叠问题 （父子，兄弟，空元素等）

特性：

• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
• BFC的区域不会与float的元素区域重叠

形成条件:

• html 根元素
• float的值不是none
• position 的值不是static或者relative
• display的值是inline-block,table-cell,table-caption,flex,inline-flex
• overflow的值不是visible

tip：

bfc与元素margin重叠没有关系,可以参考他人的一个例子:https://demo.crazyming.com/?link=topic/d7/bfc.html

标签：BFC,bfc,元素,重叠,float,规范,简述,table
来源： https://www.cnblogs.com/zhangshilei/p/12194010.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。