参考链接
浮动（Float）
- 脱离正常文档流
- 想要在浮动元素和环绕的文本之间创建边距，需要给浮动元素设置外边距。在文本元素上设置外边距只会让其相对于容器缩进，因为浮动元素已经脱离正常文档流
- 如果容器太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
- 容器内有了一个浮动元素，同时容器文本内容过短（即是文本高度小于浮动元素高度）时就会出现浮动元素被绘制在容器外的问题（这问题包括容器子元素都是浮动元素导致容器失去高度的状况）。解决办法是在容器最后添加一个空元素并设置clear属性。最常见的hack方案是：为容器添加一个块级CSS伪元素（一般用::after），并将其clear属性设置为both：
<!--.container代表容器元素-->
.container::after {
content: "";<!--一定要有的-->
display: block;<!--块级元素-->
clear: both;
}
- 解决上一个问题的办法还有：把容器元素变成BFC元素，BFC元素会完全包裹住了它内部的所有元素。这里介绍创建BFC的两种方法：
.container {
overflow: auto;<!--为元素设置除visible（默认）之外的overflow属性值-->
}
.container {
display: flow-root;<!--display: flow-root做的唯一的一件事就是去创建一个BFC,无副作用-->
}
定位（Positioning）
理解定位的不同的关键是参照点，不同的position值会产生不同的参照点。下面就参照点和是否脱离正常文档流进行对比。
- 相对定位（relative postioning）
- 绝对定位（absolute postioning）
- 固定定位（fixed positioning）
- STICKY 定位
