一、常见定位方案
定位方案是控制元素的布局，常见的有三种:
- 普通流 (normal flow)
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。
- 浮动 (float)
浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。如果一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。我们通常会利用伪元素(:after或者:before)来解决这个问题。
- 绝对定位 (absolute positioning)
在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。
二、BFC概念
Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
那么 BFC呢？
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流，按照块级盒子布局的。W3C对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
三、触发BFC
只要元素满足下面任一条件即可触发 BFC 特性：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
三、解决问题
1.避免同一个 BFC 下外边距会发生折叠
常规流布局时，盒子都是垂直排列，两者之间的间距由各自的外边距所决定，但不是二者外边距之和。
<style>
div{ width: 100px;height: 100px;background: #ccc;margin: 20px;}
<div></div>
<div></div> 
从结果看，同一个BFC容器下（这里指body元素），两个兄弟div发生了外边距重叠。
理论上，两个p元素之间的外边距应当是二者外边距之和（40px）但实际上却是20px，这是外边距折叠(Collapsing Margins)的结果。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算：
1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3、两个外边距一正一负时，折叠结果是两者的相加的和。
产生折叠的必备条件：margin必须是邻接的!
BFC可能造成外边距折叠，也可以利用它来避免这种情况。BFC产生外边距折叠要满足一个条件：两个相邻元素要处于同一个BFC中。所以，若两个相邻元素在不同的BFC容器中，就能避免外边距折叠。
.fa{overflow: hidden;}
.son{width: 100px;height: 100px;background: #ccc;margin: 20px;}
<div class="fa">
<p class="son"></p>
</div>
<div class="fa">
<p class="son"></p>
</div>
2.避免同一个 BFC高度塌陷
.fa{width: 200px;height: 200px;background: black;}
.son{width: 100px; height: 100px;background: #ccc; margin: 20px;}
<div class="fa">
<div class="son"></div>
</div>
从结果看，子div的上边距和父盒子发生重叠，这时候就要触发BFC来解决这个问题。
.fa{width: 200px; height: 200px;background: black;overflow: hidden;}
.son{width: 100px; height: 100px;background: #ccc;margin: 20px;}
<body>
<div class="fa">
<div class="son"></div>
</div>
3. BFC 可以包含浮动的元素（清除浮动）
浮动的元素会脱离普通文档流 
.container{width:200px; background:green; border:1px solid #000;}
.float{width:80px; height:40px; background:#40d06c; margin:10px; float:left;
<div class="container>
<div class="float"></div>
<div class="float"></div>
</div>由于容器内元素浮动，脱离了文档流，所以容器只剩下的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素
.container{width:200px; background:green; border:1px solid #000; overflow:hidden;}
.float{width:80px; height:40px; background:#40d06c;margin:10px; float:left;
<div class="container>
<div class="float"></div>
<div class="float"></div>
</div>现在容器可以包住浮动子元素，并且其高度会扩展至包住其子元素，在这个新的BFC中浮动元素又回归到页面的常规流之中了。
4. BFC 可以阻止元素被浮动元素覆盖（文字环绕）
第一个为浮动元素，第二个为普通流中的元素
图1表示第二个元素部分被浮动元素覆盖，但是文本信息不会被浮动元素（文字环绕），要解决这个问题，可以用外边距，但也可以用BFC。
.left{height: 100px;width: 100px;background: lightblue; float: left;}
.right{width: 200px; height: 200px;background: #eee overflow:hidden}
<div class="left">我是一个左浮动的元素</div>
<div class="right>***************************文本*****************************</div>这个方法可以用来实现两列自适应布局，左边的宽度固定，右边的内容自适应宽度(去掉右边内容的宽度)。
最后注意一个容易混淆的例子：
.d1 {
overflow: hidden;
margin: 20px;
width: 100px;
height: 100px;
background-color: pink;
}
.d2 {
overflow: hidden;
margin: 20px;
width: 100px;
height: 100px;
background-color: pink;
}
<div class="d1">d1</div>
<div class="d2">d2</div>d1，d2分别对内是一个BFC容器，但他两个本身是在body形成的BFC容器下，所以d1，d2会出现外边距折叠
四、总结
- BFC也就是常说的块格式化上下文，是一个独立的渲染区域，规定了内部如何布局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部box垂直放置，计算BFC的高度的时候，浮动元素也参与计算
- 触发BFC的规则有根元素，浮动元素，position为absolute或fixed的元素，overflow不为visible的元素，display为inline-block，table-cell，table-caption，flex，inline-flex
- 可以解决外边距塌陷，清除浮动，文字环绕等问题
参考：https://blog.csdn.net/return_js/article/details/81266131
3664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
