CSS中的BFC BFC详细了解BFC可以解决的问题概述BFC的全名Block Formatting Context，称为“块级格式化上下文”，在CSS2.1规范中定义，在CSS渲染定位概念中
W3C公式解释： BFC决定要素如何定位其内容，以及与其他要素的关系和相互作用。 当涉及可视化布局时，块形成上下文提供HTML根据一定的规则进行布局的环境。
简而言之，BFC是一个完全独立的空间(布局环境)，防止空间中的子元素影响外部布局。
启动BFC时，将创建BFC的CSS。
html根元素float : left float : right position : absolute position : fixed display : inline-block display 3360在线- flex 3360网格显示：在线网格显示3360 tabledisplay 3360 table-cell display : table-caption display bfc可以解决的问题http://www. 子元素完全脱离文档流程，子元素无法支撑父元素的高度，父元素的高度聚合，页面混乱。
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' padding: 30px；/* Overflow :隐藏； */} .demo { width: 100px； height: 100px； 后台：灯光核心； margin: 10px； 浮点：左； }/style/headbodydivclass=' box ' divclass=' demo '1/divdivclass=' demo '2/divdivclass=' demo '3/divdivclass divdivclass=' demo '7/divdivclass=' demo '8/divdivclass=' demo '9/divdivclass=' demo '
亲子级别的两个要素设定相同方向的外侧距离(同上相同的下外侧距离)，外侧距离为解决高度坍塌
下一个代码father要素是从上开始40px外侧距离，但实际上是60px，本应该从父要素[father]上开始60px的子要素[son]实际上是0px
解决方法：在父元素中设置Overflow :隐藏； 打开bfc
有关外部页边距合并问题的详细信息，请参阅外部页边距合并
style .father { width: 300px； 高： 300 px； margin-top: 40px； 后台： # d42
5cc; /* overflow: hidden; */ } .son { width: 100px; height: 100px; margin-top: 60px; background: #1eb3f8; }</style><body> <div class="father"> <div class="son"></div> </div></body> 解决文字环绕问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 300px; height: 200px; background: pink; } .floatDiv { height: 50px; width: 80px; float: left; background: #2ee95c; } /* .strBfc { overflow: hidden; } */ </style></head><body> <div class="container"> <div class="floatDiv"> floatDiv </div> <div class="strBfc"> <p> Quae hic ut ab perferendis sit quod architecto, dolor debitis quam rem provident aspernatur tempora expedita. </p> </div> </div></body></html> 解决div浮动造成的遮盖问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>遮盖问题</title> <style> div { border: 5px solid lightcoral; box-sizing: border-box; } .box1 { width: 200px; height: 200px; margin-right: 10px; background: lightblue; } .box2 { width: 300px; height: 200px; background: lightgreen; /* overflow: hidden; */ } </style></head><body> <div class="box1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero sequi at mollitia amet eaque voluptatibus ipsum tenetur ullam, reprehenderit ad. </div> <div class="box2"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quasi eveniet recusandae praesentium perferendis, officiis dignissimos dicta. Consequuntur, fugit veniam? </div></body></html>
以上问题都是通过开启BFC得以解决，需要注意的是开启BFC的方式并非一种针对相应的问题使用对应的方法，其中不乏有些开启BFC的方法不适用于你当前处理的问题，这还需要自己逐一使用了解