什么是BFC？
什么是BFC，听起来是不是有点蒙，听到这个词就知道它是一个简写，BFC 的全称为：块格式化上下文（Block Formatting Context），触发BFC的元素会独立出来一个渲染区域，让处于BFC内部的元素与外部的元素相隔离，使内外元素定位不会相互影响。简单来说：BFC能影响盒模型的渲染规范；
怎么触发BFC？
- 浮动元素 float属性为 left/right
- 定位元素 position属性为 absolute 和 fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow：hidden；
意外吗？都是我们每天都在用的CSS样式。以上任何属性都可以让元素触发BFC，改变该元素的渲染规范。
BFC的功能
1、清除浮动
先说常用的一点，对，你没有看错，这些属性可以清除浮动，话不多说，上实例看
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .wrap{ 12 padding: 5px; 13 border: 10px solid #000; 14 /*overflow: hidden;*/ 15 } 16 .left, .right{ 17 width: 200px; 18 height: 200px; 19 float: left; 20 } 21 .left{ 22 background-color: pink; 23 } 24 .right{ 25 background-color: red; 26 } 27 </style> 28 </head> 29 <body> 30 <!-- 31 现在父元素 .wrap 还没有清除浮动，先预览一遍看看 32 然后自己把我注释哪一行 CSS 解开注释再预览一下 33 --> 34 <div class="wrap"> 35 <div class="left"></div> 36 <div class="right"></div> 37 </div> 38 </body> 39 </html>
父元素的浮动已经清除，高度自适应了，不止是 overflow：hidden；可以，我上面写的那些属性都行，我就不一一写实例了，可以自己去试试。
2、可以解决margin塌陷问题
先说一下什么是margin塌陷，这可以说是一个CSS的小BUG，看下面实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrap{ width: 300px; height: 300px; background-color: #333; margin-top: 50px; margin-left: 50px; } .wrap .sub{ width: 100px; height: 100px; background-color: pink; margin-top: 20px; margin-left: 20px; } </style> </head> <body> <div class="wrap"> <div class="sub"></div> </div> </body> </html>
上面代码预览你会发现子元素的 margin-top 竟然没用了！这种BUG就叫做 margin 塌陷，怎么解决呢，先说一个笨办法，就是给父元素加一个border 或 border-top，就可以解决这个问题，还有一个办法就是把父元素转换为BFC格式，用浮动 float 、用定位 position 什么的都行，只要把父元素转换为 BFC 就行。说了这么多办法到底用哪个好呢？其实用哪个都不好，因为这些CSS样式都有自己的功能，比如说我用的定位，虽然解决了 margin 塌陷的问题，但是新问题出现了，这个元素脱离了文档流，影响了原来的布局，这在实际开发项目中可是大问题，那是不是这个BUG就没有办法解决了？？？不是，虽然这些CSS样式有自己的功能，你看用那条样式不影响你原来的布局就用那个，浮动不影响就用浮动，溢出隐藏不影响就用溢出隐藏，随机应变呗。
其实 BFC 还有一些功能，这次我也就不一下子说完了，把以上两点掌握，可以说是对 BFC 有了初步了解，后期的文章我还会说到这。最后再告诉大家一个冷知识，定位和浮动可以把元素转换为 inline-block 行内块元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrap{ border: 5px solid #333; padding: 5px; position: absolute; } .sub{ width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <span class="wrap"> <div class="sub"></div> </span> </body> </html>
感谢观看，批评指导