一、浮动
普通流中，因为div是块级元素所以是单独占据一行的，假如我想让两个div在同一行显示怎么办？除了将div改成内联元素外，也可以使用浮动。
float: none || left || right || inherit;
/* (默认，就是不浮动)、left(左浮动)、right(右浮动)、inherit(继承父元素的float属性值)。 */
设置浮动后它本身会尽可能向左或者右移动，直到碰到边框或者其他的浮动元素。原理是处于普通流的元素会忽略这个浮动的元素紧跟上一个同样处于普通流的元素排版。这样就会造成浮动的元素遮盖住后面仍然处于普通流的元素。以PS图层的概念来理解的话就很好理解了，所有的普通流元素都在同一层，使用浮动后的元素会”浮“上一层，在普通流之上。 不过要注意的是，文字仍然会认为这个浮动的元素存在，为什么呢？其实float设计的初衷是用来实现文字环绕图片的效果(包含文字的元素忽略这个浮动图片，但是文字认为浮动的元素还存在就绕开它排版)。设置浮动后会出现几个现象。
- 脱离普通流
- 自动变为块级元素
- 父容器高度会塌陷也就是父容器height值会变成0(因为仍然处于普通流认为这个浮上去的元素已近不存在了， 随之带来父容器背景无法发显示、margin值也会塌陷、边框无法撑开)
显然父容器塌陷是我们不想看到的，就要清除浮动来解决。这里只演示一种方法。
添加一个新的元素，在新的元素里添加CSS属性——clear: both;意思是在这个元素的左右方向都不能出现浮动元素。不过这样突然添加一个元素的话对代码结构有影响，所以建议使用伪元素。例:
<head>
<style>
.float{
float: right;
}
.clearFix::after{
content: '';
clear: both;
}
</style>
</head>
<body>
<div class="wrapper .clearFix">
<div class="float"></div>
<div class="float"></div>
</div>
</body>
二、定位
常使用的定位有relative、absolute。简单演示下定位方式：
<head>
<style>
.demo{
wdith: 100px;
height: 100px;
background-color: pink;
position: absolute; /* 使用绝对定位，默认值为static，也就是没有定位 */
right: ; /* 相对于父容器右边的距离 */
left: ; /* 相对于父容器左边的距离 */
top: ; /* 相对于父容器顶部的距离 */
bottom: ; /* 相对于父容器底部的距离 */
/* 可以是具体的值，比如px、em等，也可以是百分比 */
}
</style>
</head>
<body> <!-- body也是标签，所以div的父容器是body -->
<div class=“demo”></div>
</body>
它们有一个共同的特点，就是都会脱离普通流。不同之处在于：
1、设置为absolute的元素会直接在普通流之上，不会影响普通流中的元素。使用relative后该元素虽然会在普通流之上，但是原来所处的位置仍然被占据着。可以这样理解，使用absolute的元素如同上了立交桥的车，从平面上看可以与任意桥下的车(普通流中的元素)重叠。使用relativle后那个车同样上了立交桥，同样可以与任意桥下的车重叠。但是，原来在桥下的停车位交了钱就一直保留着，桥下的车不能停在哪里。
2、absolute元素移动是相对于离它最近的定义了position属性（默认值不算）的父容器进行，如果父容器没有设置position属性，就往更外面设置了定位的盒子。假如它往上面找没有任何元素设置了positon属性，那么它就相对于浏览器窗口的大小来定位（无论body宽高多少）。
再最后补充一个position属性——fixed，在浏览网页时经常看到一直悬浮在窗口某个固定位置的小广告，这种小广告都是使用fixed属性的。脱离普通流，没钱买车位，但是比较霸道的是它是相对于浏览器窗口来定位的。需要注意的是：使用了fixed后，元素的宽度会向内收缩；当有父容器的transform给了属性值时，该元素就会从占据窗口位置变成相对设置了transform的父容器来定位。
