BFC是什么？
BFC：页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
触发条件：
- float的值不是none
- position的值不是static或relative
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
解决的问题：避免margin的重叠(属于同一个BFC的两个相邻的BOX会发生margin重叠)，自适应两栏布局(BFC的区域不会与float box重叠)，清除浮动(计算BFC的高度时，浮动元素也参与计算)
BFC布局规则
-
内部的Box会在垂直方向，一个接一个地放置。
-
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
-
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
-
BFC的区域不会与float box重叠。
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
-
计算BFC的高度时，浮动元素也参与计算。
标签：BFC,box,元素,重叠,float,margin 来源： https://www.cnblogs.com/taosifan/p/15379181.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。