1. 常见的定位方案
1.1 普通流
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。
1.2 浮动流
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
1.3 定位流
在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。
BFC：被隔离的区间
会形成独立的渲染区域，内部元素的渲染不会影响外界。
1. 怎么触发BFC呢？
- 浮动元素：
float属性不为none - 绝对定位元素：
position是absolute或fixed - 块级元素：
overflow属性不是visible flex元素inline-block元素html元素
2. 解决什么问题？
- 竖直方向上的
margin重叠
想要避免外边距重叠，可以把它们放进不同的BFC容器中 例如：
.container {
overflow: hidden;
}
p {
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
<div class="container">
<p></p>
</div>
<div class="container">
<p></p>
</div>
margin-top传递
.test{
width: 100px;
height: 100px;
background-color: lightgreen;
/*下面注释的这几种方式都可以的*/
/* overflow: auto|hidden|scroll; */
/* position: fixed | absolute; */
/* float: right | left; */
/* display: table|flex|grid|inline-block; */
}
.test-box{
width: 50px;
height: 50px;
background-color: lightcoral;
margin-top: 20px;
}
<div class="test">
<div class="test-box">
</div>
</div>
- 高度坍塌（清除浮动）
.float-box{
width: 200px;
border: 1px solid black;
/* overflow: scroll | auto | hidden; */
/* display: table | grid | flex | inline-block; */
/* position: fixed | absolute; */
/* float: right | left; */
}
.f-box{
height: 100px;
width: 100px;
background-color: lightgreen;
float: left;
}
<div class="float-box">
<div class="f-box"></div>
</div>
- 阻止元素被浮动元素覆盖
下面代码展示的一个文字环绕效果中，第二个
div有一部分被浮动元素覆盖了。
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动,
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
这个时候触发第二个元素的BFC特性，例如加上overflow: hidden，第二个元素就不会被浮动元素覆盖。
