CSS的基本布局模型
CSS的基本布局模型有三种：Flow（流动）、Layer（层）、Float（浮动）。
Float模型（默认）
块状元素在所在处的包含元素内自上而下按顺序垂直延伸分布；
内联元素在所在处的包含元素内从左到右水平分布。
Float模型
float:left;
层模型
让html元素能在网页中精确定位。
层模型有三种形式：absolute、relative、fixed。
(1)绝对定位：设置position:absolute;将元素从文档流中拉出来，然后使用left、right、top、bottom属性相对于其最近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，就相对于body。
(2)相对定位：设置position:relative;然后通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位的完成过程是先按照static(float)方式生成一个元素，然后相对于以前的元素移动，偏移前的位置不变（也就是说，后面的元素还是在原位置的后面）。
(3)固定定位：与绝对定位类似，但他的相对移动的坐标是视图（屏幕内的网页窗口），不熟文档流的影响，这与background-attachment:fixed;属性功能相同。
(4)通过relative和absolute结合定位
#box3{
width:200px;
height:200px;
position:relative;
}
#box4{
width:99%;
position:absolute;
bottom:0;
right:0;
left:0;
}<div id="box3">
<img src="https://img.mukewang.com/541a7d8a00018cf102000200.jpg">
<div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>效果如下：
