1、文本流：
2、float和绝对定位都不占文本流的位置
3、普通流是默认定位方式，就是依次按照文本流的位置顺序布局。
4、相对定位可以看作特殊的普通流定位。相对定位的元素是相对自己本身的位置（在普通流中）进行定位。
5、position的absolute属性绝对定位：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。
6、position中的fix属性是相对浏览器窗口进行定位
7、清除浮动样式的一种策略是：在最后添加一个空div，对它清理 <div style="clear:both;"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<bodyf
<div style="width: 100%;">
<div style="width: 100%;height: 200px;background-color: #0b6aff;"></div>
<div style="width: 100%;height: 200px;horiz-align: left;">
<div style="width:200px;height: 200px;float: left;background-color: #d7ff80"></div>
<div style="width:200px;height: 200px;background-color: #36beff;float:left;"></div>
<div style="width:auto;height: 200px;background-color: #2effc7;"></div>
</div>
<div style="width: 100%;height: 200px;background-color: #ffb6ac;clear: both"></div>
</div>
<div style="width: 100%;">
<div style="width: 100%;height: 200px;background-color: #0b6aff;"></div>
<div style="width: 100%;height: 200px;horiz-align: left;">
<div style="width:10%;height: 200px;float: left;background-color: #d7ff80"></div>
<div style="width:80%;height: 200px;background-color: #2effc7;float: left;"></div>
<div style="width:10%;height: 200px;float: left;background-color: #36beff"></div>
</div>
<div style="width: 100%;height: 200px;background-color: #ffb6ac;clear: both"></div>
</div>
</body>
</html>