块级格式化上下文（BFC）详解

Block Formatting Content，即块级格式化上下文 

参考链接： 区块格式化上下文 - Web 开发者指南 | MDN

BFC所具有的特性：

1. 在bfc中，内部的盒子会在垂直方向，一个接一个的排列；
2. 在bfc中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）；
3. 盒子垂直方向的距离由margin决定，属于同一个bfc的两个相邻盒子的margin会发生重叠；
4. bfc的区域不会与浮动盒子产生交集，而是紧贴浮动边缘；
5. bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
6. 计算bfc高度的时候，浮动元素也会参与计算

 怎么取创建BFC

1. float属性不为none（脱离文档流）
2. position为absolute或fixed
3. display为flow-root，inline-block，table-cell，table-caption，flex,inine-flex
4. overflow不为visible
5. 根元素

 

---

display: content; 

display：contents 使 div 不产生任何框 ，因此不会渲染其背景 边框 和 内边距 ，但颜色 / 字体等继承的属性还是会对其子元素产生效果；

即在盒子上添加 display : contents , 当前盒子若设置了 background border padding width height 等属性会失效；